搜索

Flutter Boost 混合开发框架初探

iOS开发

共 15341字，需浏览 31分钟

 ·

2021-07-21 13:32

👇👇关注后回复 “进群” ，拉你进程序员交流群👇👇


作者丨xiangzhihong

来源：

https://segmentfault.com/a/1190000039760722

一、Flutter Boost简介

众所周知，Flutter是一个由C++实现的Flutter Engine和由Dart实现的Framework组成的跨平台技术框架。其中，Flutter Engine负责线程管理、Dart VM状态管理以及Dart代码加载等工作，而Dart代码所实现的Framework则负责上层业务开发，如Flutter提供的组件等概念就是Framework的范畴。

随着Flutter的发展，国内越来越多的App开始接入Flutter。为了降低风险，大部分App采用渐进式方式引入Flutter，在App里选几个页面用Flutter来编写，但都碰到了相同的问题，在原生页面和Flutter页面共存的情况下，如何管理路由，以及原生页面与Flutter页面之间的切换和通信都是混合开发中需要解决的问题。然而，官方没有提供明确的解决方案，只是在混合开发时，官方建议开发者，应该使用同一个引擎支持多窗口绘制的能力，至少在逻辑上做到FlutterViewController是共享同一个引擎里面的资源。换句话说，官方希望所有的绘制窗口共享同一个主Isolate，而不是出现多个主Isolate的情况。不过，对于现在已经出现的多引擎模式问题，Flutter官方也没有提供好的解决方案。除了内存消耗严重外，多引擎模式还会带来如下一些问题。

  • 冗余资源问题。多引擎模式下每个引擎的Isolate是相互独立的，虽然在逻辑上这并没有什么坏处，但是每个引擎底层都维护了一套图片缓存等比较消耗内存的对象，因此设备的内存消耗是非常严重的。

  • 插件注册问题。在Flutter插件中，消息传递需要依赖Messenger，而Messenger是由FlutterViewController去实现的。如果一个应用中同时存在多个FlutterViewController，那么插件的注册和通信将会变得混乱且难以维护。

  • Flutter组件和原生页面的差异化问题。通常，Flutter页面是由组件构成的，原生页面则是由ViewController或者Activity构成的。逻辑上来说，我们希望消除Flutter页面与原生页面的差异，否则在进行页面埋点和其它一些操作时增加一些额外的工作量。

  • 增加页面通信的复杂度。如果所有的Dart代码都运行在同一个引擎实例中，那么它们会共享同一个Isolate，可以用统一的框架完成组件之间的通信，但是如果存在多个引擎实例会让Isolate的管理变得更加复杂。

如果不解决多引擎问题，那么混合项目的导航栈如下图所示。

目前，对于原生工程混编Flutter工程出现的多引擎模式问题，国内主要有两种解决方案，一种是字节跳动的修改Flutter Engine源码方案，另一种是闲鱼开源的FlutterBoost。由于字节跳动的混合开发的方案没有开源，所以现在能使用的就剩下FlutterBoost方案。

FlutterBoost是闲鱼技术团队开发的一个可复用页面的插件，旨在把Flutter容器做成类似于浏览器的加载方案。为此，闲鱼技术团队为希望FlutterBoost能完成如下的基本功能：

  • 可复用的通用型混合开发方案。

  • 支持更加复杂的混合模式，比如支持Tab切换的场景。

  • 无侵入性方案，使用时不再依赖修改Flutter的方案。

  • 支持对页面生命周期进行统一的管理。

  • 具有统一明确的设计概念。

并且，最近Flutter Boost升级了3.0版本，并带来了如下的一些更新：

  • 不侵入引擎，兼容Flutter的各种版本，Flutter sdk的升级不需要再升级FlutterBoost，极大降低升级成本。

  • 不区分Androidx和Support分支。

  • 简化架构和接口，和FlutterBoost2.0比，代码减少了一半。

  • 双端统一，包括接口和设计上的统一。

  • 支持打开Flutter页面，不再打开容器场景。

  • 页面生命周期变化通知更方便业务使用。

  • 解决了2.0中的遗留问题，例如，Fragment接入困难、页面关闭后不能传递数据、dispose不执行，内存占用过高等。

二、Flutter Boost集成

在原生项目中集成Flutter Boost只需要将Flutter Boost看成是一个插件工程即可。和其他Flutter插件的集成方式一样，使用FlutterBoost之前需要先添加依赖。使用Android Studio打开混合工程的Flutter工程，在pubspec.yaml中添加FlutterBoost依赖插件，如下所示。

flutter_boost:
    git:
        url: 'https://github.com/alibaba/flutter_boost.git'
        ref: 'v3.0-hotfixes'

需要说明的是，此处的所依赖的FlutterBoost的版本与Flutter的版本是对应的，如果不对应使用过程中会出现版本不匹配的错误。然后，使用flutter packages get命令将FlutterBoost插件拉取到本地。

2.1 Android集成

使用Android Studio打开新建的原生Android工程，在原生Android工程的settings.gradle文件中添加如下代码。

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir.parentFile,
  'flutter_library/.android/include_flutter.groovy'))

然后，打开原生Android工程app目录下的build.gradle文件，继续添加如下依赖脚本。

dependencies {
  implementation project(':flutter_boost')
  implementation project(':flutter')
}

重新编译构建原生Android工程，如果没有任何错误则说明Android成功了集成FlutterBoost。使用Flutter Boost 之前，需要先执行初始化。打开原生Android工程，新建一个继承FlutterApplication的Application，然后在onCreate()方法中初始化FlutterBoost，代码如下。

public class MyApplication extends FlutterApplication {


    @Override
    public void onCreate() {
        super.onCreate();

        FlutterBoost.instance().setup(this, new FlutterBoostDelegate() {

            @Override
            public void pushNativeRoute(String pageName, HashMap<String, String> arguments) {
                Intent intent = new Intent(FlutterBoost.instance().currentActivity(), NativePageActivity.class);
                FlutterBoost.instance().currentActivity().startActivity(intent);
            }

            @Override
            public void pushFlutterRoute(String pageName, HashMap<String, String> arguments) {
                Intent intent = new FlutterBoostActivity.CachedEngineIntentBuilder(FlutterBoostActivity.class, FlutterBoost.ENGINE_ID)
                        .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.opaque)
                        .destroyEngineWithActivity(false)
                        .url(pageName)
                        .urlParams(arguments)
                        .build(FlutterBoost.instance().currentActivity());
                FlutterBoost.instance().currentActivity().startActivity(intent);
            }

        },engine->{
            engine.getPlugins();
        } );
    }
}

然后，打开原生Android工程下的AndroidManifest.xml文件，将Application替换成自定义的MyApplication，如下所示。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          package="com.idlefish.flutterboost.example">

    <application
        android:name="com.idlefish.flutterboost.example.MyApplication"
        android:label="flutter_boost_example"
        android:icon="@mipmap/ic_launcher">

        <activity
            android:name="com.idlefish.flutterboost.containers.FlutterBoostActivity"
            android:theme="@style/Theme.AppCompat"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize" >
            <meta-data android:name="io.flutter.embedding.android.SplashScreenDrawable" android:resource="@drawable/launch_background"/>

        </activity>
        <meta-data android:name="flutterEmbedding"
                   android:value="2">
        </meta-data>
    </application>
</manifest>

由于Flutter Boost 是以插件的方式集成到原生Android项目的，所以我们可以在Native 打开和关闭Flutter模块的页面。

FlutterBoost.instance().open("flutterPage",params);
FlutterBoost.instance().close("uniqueId");

而Flutter Dart的使用如下。首先，我们可以在main.dart文件的程序入口main()方法中进行初始化。

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
   static Map<String, FlutterBoostRouteFactory>
       routerMap = {
    '/': (settings, uniqueId) {
      return PageRouteBuilder<dynamic>(
          settings: settings, pageBuilder: (_, __, ___)
          => Container());
    },
    'embedded': (settings, uniqueId) {
      return PageRouteBuilder<dynamic>(
          settings: settings,
          pageBuilder: (_, __, ___) =>
          EmbeddedFirstRouteWidget());
    },
    'presentFlutterPage': (settings, uniqueId) {
      return PageRouteBuilder<dynamic>(
          settings: settings,
          pageBuilder: (_, __, ___) =>
          FlutterRouteWidget(
                params: settings.arguments,
                uniqueId: uniqueId,
              ));
    }};
   Route<dynamic> routeFactory(RouteSettings settings, String uniqueId) {
    FlutterBoostRouteFactory func =routerMap[settings.name];
    if (func == null) {
      return null;
    }
    return func(settings, uniqueId);
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterBoostApp(
      routeFactory
    );
  }

当然，还可以监听页面的生命周期，如下所示。

class SimpleWidget extends StatefulWidget {
  final Map params;
  final String messages;
  final String uniqueId;

  const SimpleWidget(this.uniqueId, this.params, this.messages);

  @override
  _SimpleWidgetState createState() => _SimpleWidgetState();
}

class _SimpleWidgetState extends State<SimpleWidget>
    with PageVisibilityObserver {
  static const String _kTag = 'xlog';
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('$_kTag#didChangeDependencies, ${widget.uniqueId}, $this');

  }

  @override
  void initState() {
    super.initState();
   PageVisibilityBinding.instance.addObserver(this, ModalRoute.of(context));
   print('$_kTag#initState, ${widget.uniqueId}, $this');
  }

  @override
  void dispose() {
    PageVisibilityBinding.instance.removeObserver(this);
    print('$_kTag#dispose, ${widget.uniqueId}, $this');
    super.dispose();
  }

  @override
  void onForeground() {
    print('$_kTag#onForeground, ${widget.uniqueId}, $this');
  }

  @override
  void onBackground() {
    print('$_kTag#onBackground, ${widget.uniqueId}, $this');
  }

  @override
  void onAppear(ChangeReason reason) {
    print('$_kTag#onAppear, ${widget.uniqueId}, $reason, $this');
  }

  void onDisappear(ChangeReason reason) {
    print('$_kTag#onDisappear, ${widget.uniqueId}, $reason, $this');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('tab_example'),
      ),
      body: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Container(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(top: 80.0),
                child: Text(
                  widget.messages,
                  style: TextStyle(fontSize: 28.0, color: Colors.blue),
                ),
                alignment: AlignmentDirectional.center,
              ),
              Container(
                margin: const EdgeInsets.only(top: 32.0),
                child: Text(
                  widget.uniqueId,
                  style: TextStyle(fontSize: 22.0, color: Colors.red),
                ),
                alignment: AlignmentDirectional.center,
              ),
              InkWell(
                child: Container(
                    padding: const EdgeInsets.all(8.0),
                    margin: const EdgeInsets.all(30.0),
                    color: Colors.yellow,
                    child: Text(
                      'open flutter page',
                      style: TextStyle(fontSize: 22.0, color: Colors.black),
                    )),
                onTap: () => BoostNavigator.of().push("flutterPage",
                    arguments: <String, String>{'from': widget.uniqueId}),
              )
              Container(
                height: 300,
                width: 200,
                child: Text(
                  '',
                  style: TextStyle(fontSize: 22.0, color: Colors.black),
                ),
              )
            ],
          ))),
    );
  }
}

然后，运行项目，就可以从原生页面跳转到Flutter页面，如下图所示效果。

2.2 iOS集成

和Android的集成步骤一样，使用Xcode打开原生iOS工程，然后在iOS的AppDelegate文件中初始化Flutter Boost ，如下所示。

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  MyFlutterBoostDelegate* delegate=[[MyFlutterBoostDelegate alloc ] init];
    [[FlutterBoost instance] setup:application delegate:delegate callback:^(FlutterEngine *engine) {
    } ];

    return YES;
}
@end

下面是自定义的FlutterBoostDelegate的代码，如下所示。

@interface MyFlutterBoostDelegate : NSObject<FlutterBoostDelegate>
@property (nonatomic,strong) UINavigationController *navigationController;
@end

@implementation MyFlutterBoostDelegate

- (void) pushNativeRoute:(FBCommonParams*) params{
    BOOL animated = [params.arguments[@"animated"] boolValue];
    BOOL present= [params.arguments[@"present"] boolValue];
    UIViewControllerDemo *nvc = [[UIViewControllerDemo alloc] initWithNibName:@"UIViewControllerDemo" bundle:[NSBundle mainBundle]];
    if(present){
        [self.navigationController presentViewController:nvc animated:animated completion:^{
        }];
    }else{
        [self.navigationController pushViewController:nvc animated:animated];
    }
}

- (void) pushFlutterRoute:(FBCommonParams*)params {

    FlutterEngine* engine =  [[FlutterBoost instance ] getEngine];
    engine.viewController = nil;

    FBFlutterViewContainer *vc = FBFlutterViewContainer.new ;

    [vc setName:params.pageName params:params.arguments];

    BOOL animated = [params.arguments[@"animated"] boolValue];
    BOOL present= [params.arguments[@"present"] boolValue];
    if(present){
        [self.navigationController presentViewController:vc animated:animated completion:^{
        }];
    }else{
        [self.navigationController pushViewController:vc animated:animated];

    }
}

- (void) popRoute:(FBCommonParams*)params
         result:(NSDictionary *)result{

    FBFlutterViewContainer *vc = (id)self.navigationController.presentedViewController;

    if([vc isKindOfClass:FBFlutterViewContainer.class] && [vc.uniqueIDString isEqual: params.uniqueId]){
        [vc dismissViewControllerAnimated:YES completion:^{}];
    }else{
        [self.navigationController popViewControllerAnimated:YES];
    }

}

@end

如果要在原生iOS代码中打开或关闭Flutter页面，可以使用下面的方式。

[[FlutterBoost instance] open:@"flutterPage" arguments:@{@"animated":@(YES)}  ];
[[FlutterBoost instance] open:@"secondStateful" arguments:@{@"present":@(YES)}];

三、Flutter Boost架构

对于混合工程来说，原生端和Flutter端对于页面的定义是不一样的。对于原生端而言，页面通常指的是一个ViewController或者Activity，而对于Flutter来说，页面通常指的是Flutter组件。FlutterBoost框架所要做的就是统一混合工程中页面的概念，或者说弱化Flutter组件对应容器页面的概念。换句话说，当有一个原生页面存在的时候，FlutteBoost就能保证一定有一个对应的Flutter的容器页面存在。

FlutterBoost框架其实就是由原生容器通过消息驱动Flutter页面容器，从而达到原生容器与Flutter容器同步的目的，而Flutter渲染的内容是由原生容器去驱动的，下面是Flutter Boost 给的一个Flutter Boost 的架构示意图。


可以看到，Flutter Boost插件分为平台和Dart两端，中间通过Message Channel连接。平台侧提供了Flutter引擎的配置和管理、Native容器的创建/销毁、页面可见性变化通知，以及Flutter页面的打开/关闭接口等。而Dart侧除了提供类似原生Navigator的页面导航接口的能力外，还负责Flutter页面的路由管理。

总的来说，正是基于共享同一个引擎的方案，使得FlutterBoost框架有效的解决了多引擎的问题。简单来说，FlutterBoost在Dart端引入了容器的概念，当存在多个Flutter页面时，FlutterBoost不需要再用栈的结构去维护现有页面，而是使用扁平化键值对映射的形式去维护当前所有的页面，并且每个页面拥有一个唯一的id

四、FlutterBoost3.0更新

4.1 不入侵引擎

为了解决官方引擎复用引起的问题，FlutterBoost2.0拷贝了Flutter引擎Embedding层的一些代码进行改造，这使得后期的升级成本极高。而FlutterBoost3.0采用继承的方式扩展FlutterActivity/FlutterFragment等组件的能力，并且通过在适当时机给Dart侧发送appIsResumed消息解决引擎复用时生命周期事件错乱导致的页面卡死问题，并且，FlutterBoost 3.0 也兼容最新的官方发布的 Flutter 2.0。

4.2 不区分Androidx和Support分支

FlutterBoost2.0通过自己实现FlutterActivityAndFragmentDelegate.Host接口来扩展FlutterActivity和FlutterFragment的能力，而getLifecycle是必须实现的接口，这就导致对androidx的依赖。这也是为什么FlutterBoostView的实现没有被放入FlutterBoost3.0插件中的原因。而FlutterBoost3.0通过继承的方式扩展FlutterActivity/FlutterFragment的能力的额外收益就是，可以做到不依赖androidx。

4.3 双端设计统一，接口统一

很多Flutter开发者只会一端，只会Android 或者只会IOS，但他需要接入双端，所以双端统一能降低他的 学习成本和接入成本。FlutterBoost3.0，在设计上 Android和IOS都做了对齐，特别接口上做到了参数级的对齐。

4.4 支持 【打开flutter页面不再打开容器】 场景

在Flutter模块内部，Flutter 页面跳转Flutter 页面是可以不需要再打开Flutter容器的，不打开容器，能节省内存开销。在FlutterBoost3.0上，打开容器和不打开容器的区别表现在用户接口上仅仅是withContainer参数是否为true就好。

InkWell(
  child: Container(
      color: Colors.yellow,
      child: Text(
        '打开外部路由',
        style: TextStyle(fontSize: 22.0, color: Colors.black),
      )),
  onTap: () => BoostNavigator.of().push("flutterPage",
      arguments: <String, String>{'from': widget.uniqueId}),
),
InkWell(
  child: Container(
      color: Colors.yellow,
      child: Text(
        '打开内部路由',
        style: TextStyle(fontSize: 22.0, color: Colors.black),
      )),
  onTap: () => BoostNavigator.of().push("flutterPage",
      withContainer: true,
      arguments: <String, String>{'from': widget.uniqueId}),
)

4.5 生命周期的精准通知

在FlutterBoost2.0上，每个页面都会收到页面生命周期通知，而FlutterBoost3.0只会通知页面可见性实际发生了变化的页面，接口也更符合flutter的设计。

4.6 其他Issue

除了上面的一些特性外，Flutter Boost 3.0版本还解决了如下一些问题：

  • 页面关闭后参数的传递，之前只有iOS支持，android不支持，目前在dart侧实现，Ios 和Android 都支持。

  • 解决了Android 状态栏字体和颜色问题。

  • 解决了页面回退willpopscope不起作用问题。

  • 解决了不在栈顶的页面也收到生命周期回调的问题

  • 解决了多次setState耗性能问题。

  • 提供了Framgent 多种接入方式的Demo，方便tab 场景的接入。

  • 生命周期的回调代码，可以用户代码里面with的方式接入，使用更简单。

  • 全面简化了，接入成本，包括 dart侧，android侧和ios

  • 丰富了demo，包含了基本场景，方便用户接入 和测试回归

-End-

最近有一些小伙伴，让我帮忙找一些 面试题 资料，于是我翻遍了收藏的 5T 资料后，汇总整理出来，可以说是程序员面试必备！所有资料都整理到网盘了，欢迎下载！

点击👆卡片，关注后回复【面试题】即可获取

在看点这里好文分享给更多人↓↓

浏览 38
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
Flutter 混合开发
SegmentFault
0
Flutter混合开发
web前端开发
0
Flutter移动开发框架
Flutter 由 Google 的工程师团队打造，用于创建高性能、跨平台的移动应用。Flutter
Flutter移动开发框架
Flutter由Google的工程师团队打造，用于创建高性能、跨平台的移动应用。Flutter针对当下以及未来的移动设备进行优化，专注于AndroidandiOS低延迟的输入和高帧率。Flutter可
Flutter混合开发玩Android客户端
躬行之
0
HybridStart混合应用开发框架
HybridStart基于apicloud的混合应用开发框架，可能是开发这一类混合应用的最佳实践。 
karuraAndroid 混合应用开发框架
karura 是一个开源的框架用于在 Android 平台上实现混合应用开发。
HybridStart混合应用开发框架
HybridStart基于apicloud的混合应用开发框架，可能是开发这一类混合应用的最佳实践。 提供一套说得过去的UI，完全独立可剥离清晰的开发模式，做APP从未这么简单井然有序的代码组织，页面再
karuraAndroid 混合应用开发框架
karura是一个开源的框架用于在Android平台上实现混合应用开发。
DWZ Mobile AppHTML5 + 原生混合开发框架
DWZ Mobile App 是一个 HTML5 + 原生混合开发框架。基于原生 JS 轻量级移动端
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报