Flutter boost框架学习笔记

1.知识点总结

1. Flutter简介以及Flutter Boost产生的原因

Flutter是一个由C++实现的Flutter Engine和由Dart实现的Framework组成的跨平台的技术框架。

其中，Flutter Engine负责线程管理、Dart VM状态管理以及Dart代码加载等工作。Dart代码所实现的Framework则负责上层业务开发，如Flutter提供的组建等概念就是Framework的范畴。

Flutter开发会遇到的问题，在Flutter页面和原生页面共存的情况下，如何管理路由，以及原生页面与Flutter页面的切换和通信问题。

多引擎模式：多个主Isolate存在。

多引擎模式问题：

• 冗余资源问题，多引擎模式下，每个引擎的Isolate是相互独立的，由于每个引擎底层都维护了一套图片缓存等比较消耗内存的对象，设备的内存消耗是非常严重的。
• 插件注册问题，Flutter插件中，消息传递需要依赖Messenger，而Messenger是由FlutterViewController去实现的。当一个应用中存在多个FlutterViewController时，那么插件的注册和通信会变得混乱而难以维护。
• Flutter组建和原生页面的差异化问题，希望消除两者的差异，否则在进行页面埋点和其他操作时会增加一些额外的工作量。
• 增加页面通信的复杂度，多个引擎实例会让Isolate的管理变得更加复杂。

Flutter Boost是闲鱼技术团队的一个可复用页面的插件，旨在把Flutter容器做成类似浏览器的加载方案。

此方案的基本功能：

1. 可复用的通用型混合开发方案
2. 支持更加复杂的混合模式，比如支持tab切换的场景
3. 无侵入性方案，使用时不再依赖修改Flutter的方案
4. 支持页面生命周期统一的管理。
5. 具有统一明确的设计概念

2.Flutter Boost的接入

1.在pubspec.yaml中添加Flutter Boost依赖插件。

2.1 Android

1.在settings.gradle中添加绑定

2.在build.gradle中添加依赖

3.MyApplication继承Flutter Application

4.AndroidManifest.xml中生命MyApplication和FlutterBoostActivity

2.2 IOS

3. Flutter Boost架构

页面的定义：

原生端，页面通常是一个ViewController或者Activity；

Flutter端，页面通常是指Flutter组件。

FlutterBoost框架是统一混合工程中的页面概念，或者弱化Flutter组件对应容器页面的概念。当有一个原生页面存在时，FlutterBoost就能保证一定有一个对应的Flutter的容器页面存在???

本质：

由原生容器通过消息驱动Flutter页面容器，从而达到原生容器与Flutter容器同步的目的，而Flutter渲染的内容是由原生容器去驱动的。通过共享同一个引擎的方案，在Dart端引入容器概念，当存在多个Flutter页面时，不通过栈结构去维护现有页面，而是使用扁平化键值对映射的形式去维护当前所有的页面，并且每个页面拥有唯一的ID。

2.疑问点汇总

• 多引擎模式：多个主Isolate存在。

  • Isolate是Dart的线程概念。与java的thread不同，各个Isolate是无法共享内存空间的。
  • 每个isolate具有自己的堆内存以确保其状态不会被其他isolates访问，具有自己的事件循环和队列。代码按照顺序执行。
  • 通信的唯一方式是通过Port进行，消息传递总是异步的。
  • flutter中封装好的isolate使用时通过compute方法进行的。

• Messenger和FlutterViewController

  • Messenger应该是用于Flutter与原生通信的消息传递。

  • FlutterViewController是iOS的，与此对应的Android是Flutter View。

  • Flutter中定义了三种不同类型的PlatformChannel，分别是

    • MethodChannel：用于传递方法调用，是比较常用的
    • EventChannel：用于传递事件
    • BasicMessageChannel：用于传递数据

  • BinaryMessenger
    BinaryMessenger是PlatformChannel与Flutter端的通信的工具，其通信使用的消息格式为二进制格式数据，BinaryMessenger在Android中是一个接口，它的实现类为FlutterNativeView

  • Codec
    Codec是消息编解码器，主要用于将二进制格式的数据转化为Handler能够识别的数据，Flutter定义了两种Codec：MessageCodec和MethodCodec。MessageCodec用于二进制格式数据与基础数据之间的编解码，BasicMessageChannel所使用的编解码器是MessageCodec。MethodChannel和EventChannel所使用的编解码均为MethodCodec。

  • Handler
    Flutter定义了三种类型的Handler，它们与PlatformChannel类型一一对应，分别是MessageHandler、MethodHandler、StreamHandler。在使用PlatformChannel时，会为它注册一个Handler，PlatformChannel会将该二进制数据通过Codec解码为转化为Handler能够识别的数据，并交给Handler处理。当Handler处理完消息之后，会通过回调函数返回result，将result通过编解码器编码为二进制格式数据，通过BinaryMessenger发送回Flutter

    MethodChannel可以实现Flutter调用Android，也可以实现Android调用Flutter

    参考文档https://blog.csdn.net/itachi85/article/details/99780766

• Flutter Boost如何进行生命周期管理

  • Flutter的生命周期：三个阶段：

    • 1.实例化组件并添加到树，Navigator.push

    • 2.状态变化，即打开新的widget或者依赖的上级widget发生变化

    • 3.从树中移除，Navigator.pop

    • 生命周期函数

      • 构造函数
      • createState
      • initState。插入到渲染树时调用，只执行一次，类似onCreateView
      • didChangeDependencies:在initState后执行，显示/关闭其他widget，可多次执行
      • build
      • Deactive，类似onStop方法，重新打开widget或者回到该widget时会执行，可多次执行
      • dispose：onDestory,在执行Navigator.pop后执行，表示该组件已销毁。
      • Reassemble:点击闪电时执行，只用于调试时的hot reload

    • 常见业务场景：

      • Widget A打开Widget B： Navigator.push(B)

        • B构造函数—>B initState—>B didChangeDependencies—>B build—>A deactive—>A didChangeDependencies.

        • Widget B退出： Navigator.pop

          • A deactive—>A didChangeDependencies—>A build—>B deactive—>B dispose。
          • 可以看出， Flutter打开、关闭Widget时跟安卓、iOS的时序一样， 都是先处理即将显示的界面。
          • 参考文档：https://www.jianshu.com/p/7e8dff26f81a

  • Flutter提供了WidgetsBindingObserver来监听AppLifecycleState。AppLifecycleState有四种状态。

    • resumed，界面可见
    • inactive，界面退到后台或者弹出弹窗的情况下，失去焦点，但是可以drawframe回调， onPause
    • Paused，后台，同onStop
    • Suspending, ios中没用，Android是挂起，不再执行drawframe回调

  • 下面是生命周期：

    • 1、初次打开widget时，不执行AppLifecycleState的回调；
    • 2、按home键或Power键， AppLifecycleState inactive---->AppLifecycleState pause
    • 3、从后台到前台：AppLifecycleState inactive—>ApplifecycleState resumed
    • 4、back键退出应用： AppLifecycleState inactive—>AppLifecycleState paused
    • 参考文档：https://www.jianshu.com/p/7e8dff26f81a

  • https://www.jianshu.com/p/6ed6f7de01ff 参考文档

    • clean state --干净的state，表示当前build出来的widget，下一次重绘检查时不需要build

    

• 页面容器

  • 页面，通常说的页面在 Flutter 中指的是Route，在 Android 中指的是Activity，iOS 中指的是 ViewController。
  • Flutter 容器：Flutter 容器提供了 Dart 代码的运行时环境，一般包含容器类、显示视图和引擎三部分：
    • FlutterActivity/FlutterViewController：官方提供的显示 Flutter⻚面容器基础类，FlutterActivity 是 Android 端基础类，FlutterViewController 对应 iOS 端基础类。
    • FlutterView：是显示 Flutter Widget 的视图。
    • FlutterEngine：是一个用于承载 Flutter 应用的可移植的运行时。它实现了 Flutter 的核心库，包括动画和图形、文件和网络 I/O、可访问性支持、插件架构，以及 Dart 运行时和编译工具链。
  • initialRoute：initialRoute 是 Flutter 页面的路由标识。
  • Navigator：Navigator 是管理 Route 的类，它通过 Overlay 栈来管理活动的 Route。
  • 参考文档：https://www.infoq.cn/article/jFaFiKtQQgsVVqHNixQc 贝壳flutter混合容器实践

• 栈结构

3.参考文档

isolate