Flutter混合开发二-FlutterBoost使用介绍

拼搏现实的明天。 2022-12-25 10:55 246阅读 0赞

## 前言 ##

《Flutter混合开发专题一》中我们介绍了Flutter官方提供的混合开发解决方案，但是其存在着一些问题并没有解决，比如原生和Flutter页面叠加跳转由于Flutter Engine重复创建而导致内存暴增的问题、Flutter应用中全局变量在各独立页面不能共享的问题、iOS平台内存泄露的问题等等，目前官方在混合开发解决方案上并没有花太多的时间去改进优化。

国内很多大厂在去年已经开始研究Flutter，并在现有项目中完成了集成，其中阿里闲鱼团队研究比较早且投入精力比较大，闲鱼APP在2018年就已经集成了Flutter，且最初用在了打开最多的商品详情页面，前期闲鱼为了解决混合开发的问题开发了一套混合开发插件hybridstackmanager，项目开源地址为[github.com/alibaba-flu…][github.com_alibaba-flu]，该方案的一个特点是具有侵入性，需要修改Flutter框架的源码，且在复杂的页面场景中有一定局限性，因此，闲鱼团队接下来开发了新一代混合开发技术方案FlutterBoost，并在今年3月初进行了开源。

## FlutterBoost介绍 ##

点击查看闲鱼团队的文章了解FlutterBoost详细介绍

[mp.weixin.qq.com/s/v-wwruadJ…][mp.weixin.qq.com_s_v-wwruadJ]

## FlutterBoost集成 ##

由于FlutterBoost封装成了插件，所以集成是非常简单的，只需要对工程进行少量代码接入即可。下面以一个Demo工程为例详细了解一下接入方式。

### 例子工程 ###

我们有一个原生Android项目`FBDemo`，需要基于此项目引入Flutter开发新的页面，我们可以在FBDemo同级目录创建一个Flutter module项目，取名为`flutter_boost_module`，将Flutter module项目引入集成到原生项目中，集成方式参考《Flutter混合开发专题一》。这时我们就可以在Flutter module项目中开发新的Flutter页面了。下面就集成FlutterBoost的方式分步说明

### Flutter module项目集成FlutterBoost ###

在`flutter_boost_module`项目的pubspec.yaml文件中添加依赖插件配置

dependencies:
      flutter_boost: ^0.0.411
    复制代码

配置完成后执行`flutter packages get`命令下载依赖插件到本地。

### 安卓原生项目中集成FlutterBoost ###

Flutter module项目引入FlutterBoost插件后，在Android studio中同步原生工程，同步完成后项目结构如下

![d54d2efa86a0e47cef6f57866216f000.png][]

然后我们就可以引入FlutterBoost的安卓工程代码了，在app目录下的build.gradle中添加以下项目依赖

dependencies {
    	 ...
    	 
        implementation project(':flutter_boost')
    }
    复制代码

### Flutter module项目使用FlutterBoost ###

假设我们使用Flutter创建两个页面Widget：`FirstPage`和`SecondPage`。

首先我们需要在main方法中运行的rootWidget中注册这两个页面。

@override
    void initState() {
    	super.initState();
    	
    	FlutterBoost.singleton.registerPageBuilders({
          'flutterbus://flutterFirstPage': (pageName, params, _) {
            print("first flutterPage params:$params");
            ...
            return FirstPage();
          },
          'flutterbus://flutterSecondPage': (pageName, params, _) {
            print("second flutterPage params:$params");
            ...
            return SecondPage();
          },
        });
    	
    	FlutterBoost.handleOnStartPage();
    }
    
    @override
    Widget build(BuildContext context) {
    	return MaterialApp(
    	    title: 'Flutter Boost example',
    	    builder: FlutterBoost.init(),
    	    home: Container());
    }
    复制代码

### 安卓原生项目中使用FlutterBoost ###

Flutter引擎加载及FlutterBoostPlugin初始化

首先，根据FlutterBoost给的例子我们原生项目的Application需要继承`FlutterApplication`，其实这个不是必须的，`FlutterApplication`中主要是在onCreate方法中初始化加载flutter.so库，该操作我们可以在适当的地方自己来加即可。

其次，FlutterBoost的example中在自定义的Application的onCreate方法中初始化FlutterBoostPlugin，这个我们可以提取出来放到一个单独的类里。

基于以上两点我实现了一个工具类用来执行FlutterBoost的初始化

public class FlutterMediator {
        public static void init(final Application app) {
            //此处必须启动初始化，主要是载入Flutter引擎文件
            FlutterMain.startInitialization(app);
    
            FlutterBoostPlugin.init(new IPlatform() {
                @Override
                public Application getApplication() {
                    return app;
                }
    
                @Override
                public Activity getMainActivity() {
                    return MainActivity.sRef.get();
                }
    
                @Override
                public boolean isDebug() {
                    return true;
                }
    
                @Override
                public boolean startActivity(Context context, String url, int requestCode) {
                    Debuger.log("startActivity url="+url);
    
                    return PageRouter.openPageByUrl(context,url,requestCode);
                }
    
                @Override
                public Map getSettings() {
                    return null;
                }
            });
        }
    }
    复制代码

这样，我们在原生项目中的自定义Application的onCreate方法中只需要调用`FlutterMediator.init(this);`方法即可完成FlutterBoost的初始化了。其中`MainActivity`应该是一直存在栈底的Activity，一般是我们的首页。

Flutter页面对应Native容器

FlutterBoost初始化完成之后，针对Flutter中的`FirstPage`和`SecondPage`页面我们需要在原生中创建对应的Native容器，即FlutterBoost中定义的Container，可以是Activity也可以是Fragment，这里我们使用Activity实现，

// Flutter中FirstPage对应的Native container
    
    public class FlutterFirstPageActivity extends BoostFlutterActivity {
        private int id = 0;
        private String name;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            Intent intent = getIntent();
            if(intent != null) {
                String url = intent.getStringExtra("url");
                Map map = UrlUtil.parseParams(url);
                id = Integer.parseInt(map.get("id").toString());
                name = map.get("name").toString();
            }
        }
    
        @Override
        public String getContainerName() {
            return PageRouter.FLUTTER_FIRST_PAGE_URL;
        }
    
        @Override
        public Map getContainerParams() {
            Map map = new HashMap();
            map.put("id", id);
            map.put("name", name);
            return map;
        }
    
        @Override
        public void onRegisterPlugins(PluginRegistry registry) {
            GeneratedPluginRegistrant.registerWith(registry);
        }
    }
    复制代码

FlutterBoost已经为我们实现好了Activity类型的容器`BoostFlutterActivity`，该类实现了`IFlutterViewContainer`接口，我们自定义容器时只需要继承该Activity并实现三个方法即可，其中

*  `getContainerName`即是容器的名称，和Flutter层注册PageBuilder相对应；
 *  `getContainerParams`为该容器需要传递给Flutter层对应Widget的参数，页面跳转接收的参数传递给Flutter页面就是在这里处理，需要将数据包装到Map中；
 *  `onRegisterPlugins`是为该页面注册插件；

页面跳转路由

我们在上面FlutterBoostPlugin初始化的代码中看到了一行`PageRouter.openPageByUrl(context,url,requestCode);`代码，这句代码是用来处理Flutter页面根据url打开另一个页面的操作。`PageRouter`是我们原生层定义的一个页面路由类

public class PageRouter {
        public static final String NATIVE_FIRST_PAGE_URL = "flutterbus://nativeFirstPage";
        public static final String NATIVE_SECOND_PAGE_URL = "flutterbus://nativeSecondPage";
        public static final String FLUTTER_FIRST_PAGE_URL = "flutterbus://flutterFirstPage";
        public static final String FLUTTER_SECOND_PAGE_URL = "flutterbus://flutterSecondPage";
    
        public static boolean openPageByUrl(Context context, String url) {
            return openPageByUrl(context, url, 0);
        }
    
        public static boolean openPageByUrl(Context context, String url, int requestCode) {
            try {
                Intent intent;
                if (url.startsWith(NATIVE_FIRST_PAGE_URL)) {
                    intent = new Intent(context, FirstNativeActivity.class);
                    intent.putExtra("url", url);
                    context.startActivity(intent);
                    return true;
                } else if (url.startsWith(NATIVE_SECOND_PAGE_URL)) {
                    intent = new Intent(context, SecondNativeActivity.class);
                    intent.putExtra("url", url);
                    if(context instanceof Activity) {
                        ((Activity)context).startActivityForResult(intent, requestCode);
                    }
                    return true;
                } else if(url.startsWith(FLUTTER_FIRST_PAGE_URL)) {
                    intent = new Intent(context, FlutterFirstPageActivity.class);
                    intent.putExtra("url", url);
                    context.startActivity(intent);
                    return true;
                } else if (url.startsWith(FLUTTER_SECOND_PAGE_URL)) {
                    intent = new Intent(context, FlutterSecondPageActivity.class);
                    intent.putExtra("url", url);
                    if(context instanceof Activity) {
                        ((Activity)context).startActivityForResult(intent, requestCode);
                    }
                    return true;
                } else {
                    return false;
                }
            } catch (Throwable t) {
                return false;
            }
        }
    
    }
    复制代码

### Flutter页面和Native页面跳转 ###

以上准备工作及页面路由类定义好之后，我们就可以在Flutter层和Native层调用相应的方法根据要跳转页面的url执行页面跳转操作了，你既可以Native页面跳转Native页面，也可以Native页面跳转Flutter页面，既可以在Flutter页面跳转Native页面，也可以Flutter页面跳转Flutter页面，具体例子如下

Native页面跳转Flutter页面

Native页面跳转Flutter页面其实就是打开一个Flutter页面对应的Native容器，我们可以根据路由来进行跳转操作，比如从`MainActivity`跳转到Flutter的`FirstWidget`页面，一句代码搞定

PageRouter.openPageByUrl(this, PageRouter.FLUTTER_FIRST_PAGE_URL+"?id=123&name=bruce");
    复制代码

以上代码中对应的url中带有参数，很多时候你是不需要传参数的，这里只是举个传参数给Flutter页面的例子，即是将id和name值传到Flutter页面来使用，具体是如何使用的呢，我们需要在Flutter对应的Native容器`FlutterFirstPageActivity`中解析出url参数，然后在以下覆盖方法中包装到Map中通过PlatformChannel传递给Flutter端

@Override
    public Map getContainerParams() {
        Map map = new HashMap();
        map.put("id", id);
        map.put("name", name);
        return map;
    }
    复制代码

Flutter页面跳转Native页面

我们只需要在Flutter端使用FlutterBoost提供的方法进行跳转即可，比如我需要从`FirstWidget`跳转到`FirstNativeActivity`页面，该页面对应的url为“flutterbus://nativeFirstPage”，我们可以执行以下代码

FlutterBoost.singleton.openPage("flutterbus://nativeFirstPage", {
                    "query": {"description": "大家好，我来自First Flutter页面!!!!!!!!"}
                  });
    复制代码

其中query对应的值是要传递给下一个页面的参数，不需要也可以不传。

Flutter页面跳转Flutter页面

这个其实有两种方式，如果采用FlutterBoost定义的页面跳转，那么就需要使用以下方法

FlutterBoost.singleton.openPage("flutterbus://flutterSecondPage", {});
    复制代码

建议集成FlutterBoost后采用FlutterBoost定义的页面来使用openPage的方式跳转。

其实也可以使用Flutter中的Navigator跳转，方法如下

Navigator.of(context).push(MaterialPageRoute(builder: (context){
                    return SecondPage(enterType: 1,);
                  }));
    复制代码

如果两种跳转方式混合使用会在页面返回时出现一定的问题，因为FlutterBoost提供了关闭当前页面的方法`FlutterBoost.singleton.closePageForContext(context);`，而使用Navigator跳转的话该方法是不起作用的，所以我们在Widget页面中定义了enterType来区分，默认使用FlutterBoost的跳转方式，如果使用Navigator跳转Flutter Widget页面，则需要传入enterType=1，这样在返回当前页面时使用如下方法进行处理

void exitPage(BuildContext context) {
    	if (enterType == 0) {
    	  FlutterBoost.singleton.closePageForContext(context);
    	} else {
    	  Navigator.pop(context);
    	}
    }
    复制代码

### 页面跳转的返回值问题 ###

FlutterBoost中实现了Flutter页面跳转Native页面并接收返回值的功能，具体方法为

FlutterBoost.singleton.openPage(
                      "flutterbus://nativeSecondPage",
                      {
                        "query": {"requestCode":1000, "type": "second"}
                      },
                      resultHandler: (String key, Map<dynamic, dynamic> result) {
                    print("==============> key: $key, result: $result");
                  });
    复制代码

openPage方法中的resultHandler参数就是接收返回值的回调函数，但是经测试目前该方法存在bug，主要有两种修复方案

修复方案一

该方案采用Activity传统的跳转并返回结果的方法，即Flutter跳转指定Native页面在原生PageRouter的openPageByUrl方法中使用如下跳转方式

if(context instanceof Activity) {
    	((Activity)context).startActivityForResult(new Intent(context, NativePageActivity.class), requestCode);
    }
    复制代码

该跳转方式FlutterBoost已经实现返回结果处理的整个流程，但是需要修改以下两处bug才能正常使用。

1、类型转换错误

flutter\_boost.dart中的方法`onPageResult`中的resultData参数是`Map<String, dynamic>` 类型，而通过PlatformChannel传过来解析的数据类型为`Map<dynamic, dynamic>`，所以会报类型转换错误，控制台会打印这样一句话

... E/FlutterBoost#: onNativePageResult call error
    复制代码

解决这个问题只需要将`onPageResult`方法中的resultData参数类型`Map<String, dynamic>`改为`Map<dynamic, dynamic>`即可；

2、回调方法对应的key错误

针对1问题，修改Flutter\_Boost源码后就不会报以上错误了，但是接收结果的回调方法还是走不到，经查发现还存在另一个bug，在我们通过`openPage`方法打开页面时，最终会将回调函数通过`PageResultMediator`类的`setPageResultHandler`方法保存到一个`Map<String,PageResultHandler>`对象`_handlers`中，`PageResultMediator`类实现如下

typedef void PageResultHandler(String key , Map<dynamic,dynamic> result);
    typedef VoidCallback = void Function();
    
    class PageResultMediator{
    
      Map<String,PageResultHandler> _handlers = Map();
      void onPageResult(String key , Map<dynamic,dynamic> resultData){
    
        if(key == null) return;
    
        Logger.log("did receive page result $resultData for page key $key");
    
        if(_handlers.containsKey(key)){
          _handlers[key](key,resultData);
          _handlers.remove(key);
        }
      }
    
      VoidCallback setPageResultHandler(String key, PageResultHandler handler){
        if(key == null || handler == null) return (){};
        _handlers[key] = handler;
        return (){
          _handlers.remove(key);
        };
      }
    
    }
    复制代码

Map中的key即是我们跳转页面对应的url，即上文代码中的`flutterbus://nativeSecondPage`，而在原生页面中处理完返回数据后通过PlatformChannel方法传入的key是Native容器对应的uniqueId，具体代码如下

![f2534090be69c0812d8f785cb7663340.png][]

所以，最后Flutter中根据这个uniqueId是找不到之前的回调方法的，因此回调函数没有走到。于是对Flutter\_Boost源代码简单做了修改，将前一个页面的url放置到`onResult`方法的`Result`参数里，然后取出即可，修改后的代码如下

该代码块位于ContainerRecord.java类中

@Override
    public void onResult(Map Result) {
        Map result = (Map) Result.get("result");
        String key = result.get("currentUrl").toString();
        NavigationService.onNativePageResult(
                genResult("onNativePageResult"),
                mUniqueId,
                key,
                Result,
                mContainer.getContainerParams()
        );
    }
    复制代码

修复方案二

该方案采用FlutterBoost中实现的返回结果处理方式，而不必使用原生的跳转页面获取结果的方式，跳转页面时采用普通的Activity跳转，即

context.startActivity(new Intent(context, NativePageActivity.class));
    复制代码

该方案FlutterBoost同样有对应的实现，但是依然存在两个bug。

1、类型转换错误

该问题和方案一的1问题相同，参考方案一修改即可。

2、needResult参数在native端不能获取的问题

通过研读FlutterBoost源码我们发现，在Flutter端跳转页面时如果传入了resultHandler参数，则会将传递给native层的params中添加一个needResult为true的参数，而在native层处理打开页面的请求时会先判断是否需要结果数据，如下代码块

该代码位于FlutterBoostPlugin.java类中

public static void openPage(Context context, String url, final Map params, int requestCode) {
            ...
    
            //Handling page result.
            if (needResult(params)){
                sInstance.mMediator.setHandler(url, new PageResultHandler() {
                    @Override
                    public void onResult(String key, Map resultData) {
                        NavigationService.onNativePageResult(new MessageResult<Boolean>() {
                            ...
                        },"no use",key,resultData,params);
                    }
                });
            }
    
            sInstance.mPlatform.startActivity(ctx, concatUrl(url, params), requestCode);
        }
    
        private Boolean needResult(Map params){
    
            if(params == null) return false;
    
            final String key = "needResult";
            if(params.containsKey(key)){
                if(params.get(key) instanceof Boolean){
                    return (Boolean) params.get(key);
                }
            }
            return false;
        }
    复制代码

在方法的if语句中会通过needResult方法检测params中是否含有needResult参数且其值为true，如果为true则会缓存结果的回调到mMediator对象中，但其实这里是不会获取到needResult参数的，因为在该openPage调用之前已经将Flutter传入的params做了处理，如下

该方法位于NavigationService\_openPage.java类中

private boolean onCall(MessageResult<Boolean> result,String pageName,Map params,Boolean animated){
             Map pageParams = null;
             int requestCode = 0;
    
             if(params != null && params.get("query") != null) {
                 pageParams = (Map)params.get("query");
             }
    
             if(params != null && params.get("requestCode") != null) {
                 requestCode = (int)params.get("requestCode");
             }
    
             FlutterBoostPlugin.openPage(null,pageName,pageParams,requestCode);
    
             result.success(true);
             return true;
          }
    复制代码

通过以上代码我们会发现pageParams只是从传入的params中取出了query参数，而忽略了里面的needResult参数，所以在openPage方法中就从params中找不到needResult参数了。

发现问题之后，我们只需要在openPage方法中增加一个参数`boolean needResult`，在onCall方法中检测needResult参数是否存在，存在且为true，则将其传入openPage即可。

问题修复了，那么跳转的Native页面如果将结果返回给Flutter页面呢，只需要在Native页面返回时执行以下操作即可

Map map = new HashMap();
    map.put("value", "bruce");
    FlutterBoostPlugin.onPageResult(PageRouter.NATIVE_PAGE_URL, map);
    复制代码

以上两种方案对应的bug修复后，Flutter页面跳转Native页面并获取返回值的功能就可以正常使用了，期待闲鱼团队能够及时修复这个问题。

而对于Native页面跳转Flutter页面并返回结果数据的功能，目前Flutter\_Boost还没有实现，通过阅读源码发现有相关的代码，但还不完善，也期待闲鱼团队更快的完善这部分功能，毕竟页面跳转返回数据是我们经常碰到的场景。

## 写在最后 ##

以上就是在现有安卓原生项目中集成Flutter\_Boost的方法步骤，总体来看集成和使用起来还是比较简单的，闲鱼团队也尽可能的避免了集成时对原有代码的侵入。由于篇幅有限，文中代码贴的不是太完善，如有需要demo的同学可以通过发微信公众号消息索取。

> 关注『Flutter编程指南』微信公众号，公众号消息界面回复『widget』『dart』『存储』『插件』等获取更多精准信息，也可回复『混合开发』获取阿里、腾讯等国内大厂更多混合开发实践精选文章。

作者：Flutter编程指南  
链接：https://juejin.cn/post/6844903857131094029  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[github.com_alibaba-flu]: https://github.com/alibaba-flutter/hybridstackmanager
[mp.weixin.qq.com_s_v-wwruadJ]: https://mp.weixin.qq.com/s/v-wwruadJntX1n-YuMPC7g
[d54d2efa86a0e47cef6f57866216f000.png]: /images/20221120/8e553150d57d4a1389819dd965a9ee00.png
[f2534090be69c0812d8f785cb7663340.png]: /images/20221120/53b9ca48e98249e0b7c60997f8a50d91.png