本文共 14318 字,大约阅读时间需要 47 分钟。
《Flutter混合开发专题一》中我们介绍了Flutter官方提供的混合开发解决方案,但是其存在着一些问题并没有解决,比如原生和Flutter页面叠加跳转由于Flutter Engine重复创建而导致内存暴增的问题、Flutter应用中全局变量在各独立页面不能共享的问题、iOS平台内存泄露的问题等等,目前官方在混合开发解决方案上并没有花太多的时间去改进优化。
国内很多大厂在去年已经开始研究Flutter,并在现有项目中完成了集成,其中阿里闲鱼团队研究比较早且投入精力比较大,闲鱼APP在2018年就已经集成了Flutter,且最初用在了打开最多的商品详情页面,前期闲鱼为了解决混合开发的问题开发了一套混合开发插件hybridstackmanager,项目开源地址为,该方案的一个特点是具有侵入性,需要修改Flutter框架的源码,且在复杂的页面场景中有一定局限性,因此,闲鱼团队接下来开发了新一代混合开发技术方案FlutterBoost,并在今年3月初进行了开源。
点击查看闲鱼团队的文章了解FlutterBoost详细介绍
由于FlutterBoost封装成了插件,所以集成是非常简单的,只需要对工程进行少量代码接入即可。下面以一个Demo工程为例详细了解一下接入方式。
我们有一个原生Android项目FBDemo
,需要基于此项目引入Flutter开发新的页面,我们可以在FBDemo同级目录创建一个Flutter module项目,取名为flutter_boost_module
,将Flutter module项目引入集成到原生项目中,集成方式参考《Flutter混合开发专题一》。这时我们就可以在Flutter module项目中开发新的Flutter页面了。下面就集成FlutterBoost的方式分步说明
在flutter_boost_module
项目的pubspec.yaml文件中添加依赖插件配置
dependencies: flutter_boost: ^0.0.411复制代码
配置完成后执行flutter packages get
命令下载依赖插件到本地。
Flutter module项目引入FlutterBoost插件后,在Android studio中同步原生工程,同步完成后项目结构如下
然后我们就可以引入FlutterBoost的安卓工程代码了,在app目录下的build.gradle中添加以下项目依赖
dependencies { ... implementation project(':flutter_boost')}复制代码
假设我们使用Flutter创建两个页面Widget:FirstPage
和SecondPage
。
首先我们需要在main方法中运行的rootWidget中注册这两个页面。
@overridevoid 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();}@overrideWidget build(BuildContext context) { return MaterialApp( title: 'Flutter Boost example', builder: FlutterBoost.init(), home: Container());}复制代码
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 containerpublic 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层调用相应的方法根据要跳转页面的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端
@Overridepublic 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, Mapresult) { 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 , Mapresult);typedef VoidCallback = void Function();class PageResultMediator{ Map _handlers = Map(); void onPageResult(String key , Map 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,具体代码如下
所以,最后Flutter中根据这个uniqueId是找不到之前的回调方法的,因此回调函数没有走到。于是对Flutter_Boost源代码简单做了修改,将前一个页面的url放置到onResult
方法的Result
参数里,然后取出即可,修改后的代码如下
该代码块位于ContainerRecord.java类中
@Overridepublic 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() { ... },"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(MessageResultresult,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编程指南 链接:https://juejin.cn/post/6844903857131094029 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。关注『Flutter编程指南』微信公众号,公众号消息界面回复『widget』『dart』『存储』『插件』等获取更多精准信息,也可回复『混合开发』获取阿里、腾讯等国内大厂更多混合开发实践精选文章。