Flutter混合开发:FlutterBoost使用介绍

2019-06-1513:26:03APP与小程序开发Comments13,583 views字数 11362阅读模式

FlutterBoost集成

由于FlutterBoost封装成了插件,所以集成是非常简单的,只需要对工程进行少量代码接入即可。下面以一个Demo工程为例详细了解一下接入方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

例子工程

我们有一个原生Android项目FBDemo,需要基于此项目引入Flutter开发新的页面,我们可以在FBDemo同级目录创建一个Flutter module项目,取名为flutter_boost_module,将Flutter module项目引入集成到原生项目中,集成方式参考《Flutter混合开发专题一》。这时我们就可以在Flutter module项目中开发新的Flutter页面了。下面就集成FlutterBoost的方式分步说明文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

Flutter module项目集成FlutterBoost

flutter_boost_module项目的pubspec.yaml文件中添加依赖插件配置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

dependencies:
  flutter_boost: ^0.0.411
复制代码

配置完成后执行flutter packages get命令下载依赖插件到本地。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

安卓原生项目中集成FlutterBoost

Flutter module项目引入FlutterBoost插件后,在Android studio中同步原生工程,同步完成后项目结构如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

Flutter混合开发:FlutterBoost使用介绍

然后我们就可以引入FlutterBoost的安卓工程代码了,在app目录下的build.gradle中添加以下项目依赖文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html


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

Flutter module项目使用FlutterBoost

假设我们使用Flutter创建两个页面Widget:FirstPageSecondPage文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

首先我们需要在main方法中运行的rootWidget中注册这两个页面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

@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库,该操作我们可以在适当的地方自己来加即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

其次,FlutterBoost的example中在自定义的Application的onCreate方法中初始化FlutterBoostPlugin,这个我们可以提取出来放到一个单独的类里。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

基于以上两点我实现了一个工具类用来执行FlutterBoost的初始化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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,一般是我们的首页。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

Flutter页面对应Native容器

FlutterBoost初始化完成之后,针对Flutter中的FirstPageSecondPage页面我们需要在原生中创建对应的Native容器,即FlutterBoost中定义的Container,可以是Activity也可以是Fragment,这里我们使用Activity实现,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

// 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并实现三个方法即可,其中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

页面跳转路由

我们在上面FlutterBoostPlugin初始化的代码中看到了一行PageRouter.openPageByUrl(context,url,requestCode);代码,这句代码是用来处理Flutter页面根据url打开另一个页面的操作。PageRouter是我们原生层定义的一个页面路由类文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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页面,具体例子如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

Native页面跳转Flutter页面

Native页面跳转Flutter页面其实就是打开一个Flutter页面对应的Native容器,我们可以根据路由来进行跳转操作,比如从MainActivity跳转到Flutter的FirstWidget页面,一句代码搞定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

以上代码中对应的url中带有参数,很多时候你是不需要传参数的,这里只是举个传参数给Flutter页面的例子,即是将id和name值传到Flutter页面来使用,具体是如何使用的呢,我们需要在Flutter对应的Native容器FlutterFirstPageActivity中解析出url参数,然后在以下覆盖方法中包装到Map中通过PlatformChannel传递给Flutter端文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

@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”,我们可以执行以下代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

其中query对应的值是要传递给下一个页面的参数,不需要也可以不传。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

Flutter页面跳转Flutter页面

这个其实有两种方式,如果采用FlutterBoost定义的页面跳转,那么就需要使用以下方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

建议集成FlutterBoost后采用FlutterBoost定义的页面来使用openPage的方式跳转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

其实也可以使用Flutter中的Navigator跳转,方法如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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,这样在返回当前页面时使用如下方法进行处理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

页面跳转的返回值问题

FlutterBoost中实现了Flutter页面跳转Native页面并接收返回值的功能,具体方法为文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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,主要有两种修复方案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

修复方案一

该方案采用Activity传统的跳转并返回结果的方法,即Flutter跳转指定Native页面在原生PageRouter的openPageByUrl方法中使用如下跳转方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

该跳转方式FlutterBoost已经实现返回结果处理的整个流程,但是需要修改以下两处bug才能正常使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

1、类型转换错误

flutter_boost.dart中的方法onPageResult中的resultData参数是Map<String, dynamic> 类型,而通过PlatformChannel传过来解析的数据类型为Map<dynamic, dynamic>,所以会报类型转换错误,控制台会打印这样一句话文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

解决这个问题只需要将onPageResult方法中的resultData参数类型Map<String, dynamic>改为Map<dynamic, dynamic>即可;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

针对1问题,修改Flutter_Boost源码后就不会报以上错误了,但是接收结果的回调方法还是走不到,经查发现还存在另一个bug,在我们通过openPage方法打开页面时,最终会将回调函数通过PageResultMediator类的setPageResultHandler方法保存到一个Map<String,PageResultHandler>对象_handlers中,PageResultMediator类实现如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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,具体代码如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

Flutter混合开发:FlutterBoost使用介绍

所以,最后Flutter中根据这个uniqueId是找不到之前的回调方法的,因此回调函数没有走到。于是对Flutter_Boost源代码简单做了修改,将前一个页面的url放置到onResult方法的Result参数里,然后取出即可,修改后的代码如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

该代码块位于ContainerRecord.java类中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

@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跳转,即文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

该方案FlutterBoost同样有对应的实现,但是依然存在两个bug。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

1、类型转换错误

该问题和方案一的1问题相同,参考方案一修改即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

通过研读FlutterBoost源码我们发现,在Flutter端跳转页面时如果传入了resultHandler参数,则会将传递给native层的params中添加一个needResult为true的参数,而在native层处理打开页面的请求时会先判断是否需要结果数据,如下代码块文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

该代码位于FlutterBoostPlugin.java类中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

    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做了处理,如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

该方法位于NavigationService_openPage.java类中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

     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参数了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

发现问题之后,我们只需要在openPage方法中增加一个参数boolean needResult,在onCall方法中检测needResult参数是否存在,存在且为true,则将其传入openPage即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

问题修复了,那么跳转的Native页面如果将结果返回给Flutter页面呢,只需要在Native页面返回时执行以下操作即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

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

以上两种方案对应的bug修复后,Flutter页面跳转Native页面并获取返回值的功能就可以正常使用了,期待闲鱼团队能够及时修复这个问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

而对于Native页面跳转Flutter页面并返回结果数据的功能,目前Flutter_Boost还没有实现,通过阅读源码发现有相关的代码,但还不完善,也期待闲鱼团队更快的完善这部分功能,毕竟页面跳转返回数据是我们经常碰到的场景。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

写在最后

以上就是在现有安卓原生项目中集成Flutter_Boost的方法步骤,总体来看集成和使用起来还是比较简单的,闲鱼团队也尽可能的避免了集成时对原有代码的侵入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

作者:Flutter编程指南
链接:https://juejin.im/post/5cef944af265da1bac3ffb67
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13652.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/13652.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定