Boost接入吹水

开发Flutter的小伙伴应该都知道，目前社区内开源且比较成熟的混合框架非常少。

闲鱼作为国内较早研究，并大规模进行Flutter落地的团队，开源了他们自研的混合开发框架Flutter Boost。该项目自开源后，社区热度不断攀升，目前在Github上的❤已经达到3.5K。

https://github.com/alibaba/flutter_boost

这套方案有不少团队也采纳了，并且还基于这个方案做过对外分享，感兴趣的朋友可以度娘一下。

PS：这个小专栏呢，我们不打算探讨到是选官方的Add to app，还是选Boost好，小孩子才做选择😅。

在开始之前，我们做一下约定：

Boost的版本为 v0.1.61；
全文Boost均指代Flutter Boost，不做区分；

如果您已经充分了解如何使用Boost，可以选择性的快速跳过本节。下面我们一步步先把Boost集成进来。

Yaml配置

Boost作为一款Flutter插件，它遵循官方的接入标准，首先在pubspec.yaml中添加对应依赖：

flutter_boost:
    git:
        url: 'https://github.com/alibaba/flutter_boost.git'
        ref: '0.1.61'

针对androidx的兼容，需要依赖另一个分支。

flutter_boost:
    git:
        url: 'https://github.com/alibaba/flutter_boost.git'
        ref: 'feature/flutter_1.9_androidx_upgrade'

除了通过git地址配置依赖，更常见的做法是通过pub发布，然后引用对应版本即可。关于更多的yaml依赖规则，可以参考这篇说明文档：

https://dart.dev/tools/pub/dependencies

接下来既可以开始使用Boost了，如果你查看项目介绍会发现，文档建设上面还是有提高空间的，在README.md中对接入的介绍只有一句话🙃：

## boost集成
集成请看boost的Examples

Boost Dart配置

添加完依赖库后，可以进行相应的初始化配置。这里配置主要有两块，分别是如有初始化和入口配置。

路由配置

FlutterBoost.singleton.registerPageBuilders({
  'first': (pageName, params, _) => FirstRouteWidget(),
  'second': (pageName, params, _) => SecondRouteWidget(),
  'tab': (pageName, params, _) => TabRouteWidget(),
  'platformView': (pageName, params, _) => PlatformRouteWidget(),
  'flutterFragment': (pageName, params, _) => FragmentRouteWidget(params),
  ///可以在native层通过 getContainerParams 来传递参数
  'flutterPage': (pageName, params, _) {
    print("flutterPage params:$params");

    return FlutterRouteWidget(params:params);
  },
});

入口配置

MaterialApp(
  title: 'Flutter Boost example',
  builder: FlutterBoost.init(postPush: _onRoutePushed),
  home: Container(),
);

Boost Native配置

正常来说，一个标准Flutter插件不应该要求Flutter开发者，过多的手工去修改Native配置，绝大部分的Flutter插件会通过自动生成的GeneratedPluginRegistrant完成插件注册逻辑。

但是这里针对Boost，是需要一些操作的，主要原因有两点：

GeneratedPluginRegistrant的字段注册逻辑只是完成通道注册，这是插件与Native通信的核心；
Boost本身在Native侧也有比较强的定制逻辑，需要大量初始化逻辑，无法只通过GeneratedPluginRegistrant完成。

Boost API

完成初始化配置后，可以按需同API进去页面的切换。页面管理的核心在于Native侧，Dart侧需要切换页面时通过静态通道发起事件：

FlutterBoost.singleton.open("second");

/// flutter_boost.dart 
Future<Map<dynamic,dynamic>> open(String url,{Map<dynamic,dynamic> urlParams,Map<dynamic,dynamic> exts}){
  Map<dynamic, dynamic> properties = new Map<dynamic, dynamic>();
  properties["url"] = url;
  properties["urlParams"] = urlParams;
  properties["exts"] = exts;
  return channel.invokeMethod<Map<dynamic,dynamic>>(
    'openPage', properties);
}

扩展

为什么Dart侧页面切换要通过native侧？

从其提供的能力来看，主要是为了从Native角度，封装出页面的生命周期事件。我们知道有状态的Widget本身只有initState和dispose事件，当页面更新时触发didUpdateWidget。

下面是以iOS为例，输出的页面状态变化日志：

didInitPageContainer => willDisappearPageContainer => willShowPageContainer => didDisappearPageContainer => didShowPageContainer

简答归纳就是切换时，新页面的出现和当前页面的消失状态，最后还dump除了最终视图栈情况。

[XDEBUG]---surface changed--reset-
flutter: FlutterBoost#onMetohdCall didInitPageContainer
flutter: FlutterBoost#BoostContainerLifeCycleObserver container:second lifeCycle:ContainerLifeCycle.Init
flutter: FlutterBoost#onMetohdCall willDisappearPageContainer
flutter: FlutterBoost#BoostContainerLifeCycleObserver container:tab lifeCycle:ContainerLifeCycle.WillDisappear
flutter: FlutterBoost#onMetohdCall willShowPageContainer
flutter: FlutterBoost#ContainerObserver#2 didPush
flutter: FlutterBoost#onMetohdCall didDisappearPageContainer
flutter: FlutterBoost#BoostContainerLifeCycleObserver container:tab lifeCycle:ContainerLifeCycle.Disappear
[DEBUG]--ADD--PageStack uid/name-->0/tab-->2/second
flutter: FlutterBoost#onMetohdCall didShowPageContainer
flutter: FlutterBoost#onShownContainerChanged old:null now:2
flutter: FlutterBoost#BoostContainerLifeCycleObserver container:second lifeCycle:ContainerLifeCycle.Appear
flutter: FlutterBoost#native containner did show,
manager dump:
onstage#:
  {uniqueId=2,name=second}
offstage#:
  {uniqueId=0,name=tab}
  {uniqueId=default,name=default}
flutter: FlutterBoost#ManagerNavigatorObserver didPush
flutter: FlutterBoost#build widget:SecondRouteWidget for page:second(2)
flutter: FlutterBoost#onShownContainerChanged old:0 now:2

类似的，当调用close，页面视图栈发生变化，也有对应状态切换。

flutter: FlutterBoost#onMetohdCall willDisappearPageContainer
flutter: FlutterBoost#BoostContainerLifeCycleObserver container:second lifeCycle:ContainerLifeCycle.WillDisappear
flutter: FlutterBoost#onMetohdCall willShowPageContainer
flutter: FlutterBoost#onMetohdCall didDisappearPageContainer
flutter: FlutterBoost#BoostContainerLifeCycleObserver container:second lifeCycle:ContainerLifeCycle.Disappear
[DEBUG]--ADD--PageStack uid/name-->0/tab-->2/second
flutter: FlutterBoost#onMetohdCall didShowPageContainer
flutter: FlutterBoost#ContainerObserver#2 didOnstage
flutter: FlutterBoost#BoostContainerLifeCycleObserver container:tab lifeCycle:ContainerLifeCycle.Appear
flutter: FlutterBoost#native containner did show,
manager dump:
onstage#:
  {uniqueId=0,name=tab}
offstage#:
  {uniqueId=2,name=second}
  {uniqueId=default,name=default}
[DEBUG]--REMOVE--PageStack uid/name-->0/tab
flutter: FlutterBoost#onShownContainerChanged old:2 now:0
flutter: FlutterBoost#onMetohdCall willDeallocPageContainer
flutter: FlutterBoost#BoostContainerLifeCycleObserver container:second lifeCycle:ContainerLifeCycle.Destroy
flutter: FlutterBoost#ContainerObserver#2 didRemove
flutter: FlutterBoost#native containner dealloc, 
 manager dump:
onstage#:
  {uniqueId=0,name=tab}
offstage#:
  {uniqueId=default,name=default}

Boost接入吹水

Boost接入吹水

Yaml配置

Boost Dart配置

Boost Native配置

Boost API

扩展

小结

results matching ""

No results matching ""