赞
踩
家喻户晓,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官网也没有提供好的解决方案。除了内存耗费重大外,多引擎模式还会带来如下一些问题。
如果不解决多引擎问题,那么混合我的项目的导航栈如下图所示。
目前,对于原生工程混编Flutter工程呈现的多引擎模式问题,国内次要有两种解决方案,一种是字节跳动的批改Flutter Engine源码计划,另一种是闲鱼开源的FlutterBoost。因为字节跳动的混合开发的计划没有开源,所以当初能应用的就剩下FlutterBoost计划。
FlutterBoost是闲鱼技术团队开发的一个可复用页面的插件,旨在把Flutter容器做成相似于浏览器的加载计划。为此,闲鱼技术团队为心愿FlutterBoost能实现如下的基本功能:
并且,最近Flutter Boost降级了3.0版本,并带来了如下的一些更新:
在原生我的项目中集成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插件拉取到本地。
应用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页面,如下图所示成果。
和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端对于页面的定义是不一样的。对于原生端而言,页面通常指的是一个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
为了解决官网引擎复用引起的问题,FlutterBoost2.0拷贝了Flutter引擎Embedding层的一些代码进行革新,这使得前期的降级老本极高。而FlutterBoost3.0采纳继承的形式扩大FlutterActivity/FlutterFragment等组件的能力,并且通过在适当机会给Dart侧发送appIsResumed音讯解决引擎复用时生命周期事件错乱导致的页面卡死问题,并且,FlutterBoost 3.0 也兼容最新的官网公布的 Flutter 2.0。
FlutterBoost2.0通过本人实现FlutterActivityAndFragmentDelegate.Host接口来扩大FlutterActivity和FlutterFragment的能力,而getLifecycle是必须实现的接口,这就导致对androidx的依赖。这也是为什么FlutterBoostView的实现没有被放入FlutterBoost3.0插件中的起因。而FlutterBoost3.0通过继承的形式扩大FlutterActivity/FlutterFragment的能力的额定收益就是,能够做到不依赖androidx。
很多Flutter开发者只会一端,只会Android 或者只会IOS,但他须要接入双端,所以双端对立能升高他的 学习老本和接入老本。FlutterBoost3.0,在设计上 Android和IOS都做了对齐,特地接口上做到了参数级的对齐。
在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}),
- )
在FlutterBoost2.0上,每个页面都会收到页面生命周期告诉,而FlutterBoost3.0只会告诉页面可见性理论产生了变动的页面,接口也更合乎flutter的设计。
除了下面的一些个性外,Flutter Boost 3.0版本还解决了如下一些问题:
集成过程中可能出现的问题
在下面文章中,详细讲述了flutter_boost老版本的接入方式, https://blog.csdn.net/lzw398756924/article/details/113245174https://blog.csdn.net/lzw398756924/article/details/113245174
问题1——为什么我的Flutter Module中怎么没有.android和.ios目录?
原来这个跟flutter module的创建方式有关。
创建flutter module的时候不要用android studio创建,要用命令创建:
flutter create -t module flutter_module
在flutter_module工程中添加执行如下命令,拉取flutter依赖:
flutter packages get
注意:这一步比较重要,flutter会帮我们执行创建.android、.ios等默认的文件目录。这些文件目录中包含了后续步骤需要使用的include_flutter.groovy等文件。
当然大家会发现通过命令创建的flutter_module也有个问题,没有android和ios的目录,这个就需要我们使用android studio在其他目录下创建一个同名flutter_module工程,然后把android和ios的目录全部拷贝到原来的工程下即可。
2.Exception: Gradle build failed to produce an .apk file. It's likely that this file was generated under /Users/用户/Documents/FlutterProjects/flutter_module/build, but the tool couldn't find it.
pubspec.yaml里面的module注释掉即可
#module: # androidX: true # androidPackage: com.example.my_flutter # iosBundleIdentifier: com.example.myFlutter
注意:这个问题只会在flutter run的时候会出现,也就是单独运行flutter工程时出现。注释掉module模块后,工程下的.android、.ios目录神奇的消失了,取消注释module,flutter pub get后就又自动出现.android、.ios目录了,如果是混合开发,从Android工程侧运行工程,则不能注释module的配置。
3. Error:Kotlin: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.16.
在您的项目级 gradle 文件中,只需将 ext.kotlin.version 从您拥有的任何版本增加到“1.4.32”或任何可用的最新版本。
路径:/android/build.gradle
- buildscript {
- ext.kotlin_version = '1.4.32'
- repositories {
- google()
- jcenter()
- }
-
- dependencies {
- classpath 'com.android.tools.build:gradle:4.0.2'
- classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
- }
- }
-
- allprojects {
- repositories {
- google()
- jcenter()
- }
- }
4.Minimum supported Gradle version is 6.1.1. Current version is 5.6.4.
解决方法:
5.ext.kotlin_version = '<latest-version>' .
-
- ┌─ Flutter Fix ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
- │ [!] Your project requires a newer version of the Kotlin Gradle plugin. │
- │ Find the latest version on https://kotlinlang.org/docs/gradle.html#plugin-and-versions, then update /Users/用户/Documents/FlutterProjects/hubble_flutter_module/android/build.gradle: │
- │ ext.kotlin_version = '<latest-version>' │
- └────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
- Exception: Gradle task assembleDebug failed with exit code 1
解决方案:
- buildscript {
- ext.kotlin_version = '1.5.0' //use latest
- ...
- }
-
- dependencies {
- classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
- ...
- }
1.5.*以上的就可以,不必使用最新的kotlin版本
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。