今天我们来聊一聊Flutter与原生项目Android混合开发的集成，不知道大家有没有想过一个问题，在项目的开发中除了那种新立项的而且规模较小的项目可能是纯Flutter开发，大部分在项目中都可能是混合开发的模式，而且是以原生为主Flutter为辅的开发模式，很大部分原因就是你原来原生的项目不可能马上全部用Flutter重写一遍，而且是集成一部分Flutter的页面而已，像这种情况的话那么混合开发就是必须的，那么我们今天就先来聊聊怎么在原生项目去集成Flutter，好了让我开始吧：
我们还是回到最初看看一个完成Flutter项目是什么样的：
image.png
如图一个新建的Flutter项目里面就包括了他的Android/IOS宿主，如果是Flutter为主原生为辅的开发可以就在这里面进行，而且这种项目适合一个全新的项目，就像上面提到的那样，不适合那种原生项目就很成熟了再集成Flutter框架的情况，那我们应该怎么做呢？
如果我们要在原有成熟的原生项目里面再集成Flutter的话首先要创建一个Flutter Module，如下：
image.png
创建的项目路径要选择好，一般我们会与原生项目目录并排，如下：
image.png
Flutter Module已经创建好了，我们来看看一个Flutter Module大概是什么样子的，如图：
image.png
是不是与一个Flutter Project很像啊，是的可以说本质没有什么变化，Flutter Module依然是一个可以运行的项目，你可以进入该目录下运行 flutter run 就可以看到运行效果，上面我们说过一个Flutter的Project需要他们原生的宿主才能运行，Flutter Module也一样他们也需要原生宿主，就是红框里面的部分，不过这里面不建议你去修改（这一点不像Flutter Project）所以他们的文件夹在mac里面隐藏的
如果要在Android项目集成Flutter的话首先在Android Module的build.gradle文件中添加flutter依赖
//FlutterHybridAndroid/app/build.gradle
...
dependencies {
implementation project(':flutter')
...
}
好了，就这么简单，但是提一句由于国内网络环境的问题，你在编译项目的时候会提示你验证等问题通过不了会让你很是头疼，其实解决也很简单你在gradle中换成国内的源就可以了，如下：
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
maven {
url 'http://download.flutter.io'
}
现在我们需要开发一个Flutter页面去验证是否集成成功
Android混合开发的页面分两种情况：
1. 一种是从原生切换到一个纯Flutter页面，
2. 一种是Flutter与原生混合在一个页面，
- 我们先看第一种的情况，我们先建立一个Flutter页面：
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FlutterHybird',
theme: ThemeData(
primarySwatch: Colors.blue,
),
//window.defaultRouteName可以接收从Native传过来的参数
home: _widgetForRoute(window.defaultRouteName),
);
}
}
Widget _widgetForRoute(String route) {
switch (route) {
case 'route1':
return Center(
child: Text("route1"),
);
case 'route2':
return Center(
child: Text("route2"),
);
default:
return Center(
child: Text('route3’),
);
}
}
其中通过window.defaultRouteName可以按照Native传递过来的参数来选择启动的Widget
- 我们再开发一个Native的页面用于承载上面的Flutter，用于被原生页面跳转
public class FlutterAppActivity extends FlutterActivity {
public final static String INIT_PARAMS = "initParams";
private String initParams;
public static void start(Context context, String initParams) {
Intent intent = new Intent(context, FlutterAppActivity.class);
intent.putExtra(INIT_PARAMS, initParams);
context.startActivity(intent);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initParams = getIntent().getStringExtra(INIT_PARAMS);
}
/**
* 重载该方法来传递初始化参数
*
* @return
*/
@NonNull
@Override
public String getInitialRoute() {
return initParams == null ? super.getInitialRoute() : initParams;
}
}
- 然后在原生进行跳转即可，通过initParams传递参数
FlutterAppActivity.start(MainActivity.this,"route1”);
- 如果你的Flutter只是一个简单页面，那么跳转还会变得非常简单，你只需要你的承载页面继承FlutterActivity 即可，如下：
public class FlutterAppActivity extends FlutterActivity {
//省略部分代码
}
是的你没有看错，就是这样就可以了，他内部帮你做了很多处理，例如默认找到了Flutter的main.dark，默认执行里面的main方法，这种情况再ReactNative是想都不敢想的,因为我们知道ReactNative的JS module至少是要指定跳转的moduleName的，因为在ReactNative里面每个module都是需要注册的，这个在Flutter没有这个步骤
如果你连一个原生的承载页面都不想开发的话，那么还有究极简单的一种方式就是利用Futter SDK自带的FlutterActivity来进行跳转，如下：
startActivity(
FlutterActivity
.withNewEngine()
.initialRoute(inputParams)
.build(MainActivity.this)
);
其中initialRoute与上面的重写的getInitialRoute方法效果是一样的
initialRoute从名称上看起来是Flutter提供给我们进行Native与Flutter交互的路由跳转的，但是实际上他就是一个字符串，我们可以传递一个路由名称，有时候我们也可以通过这个参数传递一个字符串，然后在Flutter端进行解析，就像上面一样，下面我们来演示一个传递路由页面的例子来使用他
- 我们先指定一个注册了路由的Flutter页面（因为只有你注册了路由才知道要跳转到哪个路由），如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
'one_page':(context){
return OnePage();
},
'two_page':(context){
return TwoPage();
}
},
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
- 然后我们使用initialRoute传递跳转的路由页面即可：
FlutterAppActivity.start(
FlutterActivity
.withNewEngine()
.initialRoute("one_page")
.build(this)
)
OK 上面聊了下Flutter里面简单的页面跳转，我们再来聊聊在Android原生页面中嵌入FlutterUI组件
- 首先定义一个布局文件activity_main.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="Hello World!" />
<FrameLayout
android:id="@+id/container"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
</LinearLayout>
是的你没有看错，我们打算用一个FrameLayout去承载一个Flutter页面，
- 接下来我们利用上面路由的Flutter页面来嵌入到原生页面里面：
FlutterFragment fragment = FlutterFragment.withNewEngine().initialRoute("route1").build();
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.container, fragment)
.commit();
好了就这么简单就可以了，顺便说一说，老版本的Flutter原来有通过io.flutter.facade包中Flutter类的createView()方法创建出一个FlutterView，然后添加到Activity的布局中，但是由于io.flutter.facade包的废弃，该方法已经无法使用。官方的文档有说明目前不提供在View级别引入Flutter的便捷API，其实我觉得统一把Flutter的Widget看成是一个View来与原生进行嵌入是一个很灵活的方式，但是目前确实是不支持了，这样又要提一下ReactNative（谁让我就是欣赏它呢）在RN里面不论是Android还是IOS原生项目你的每一个JS的Module其实都可以抽象成一个View/UIView来嵌入到原生里面，非常的灵活
最后说一说Flutter页面的性能问题，加载 FlutterActivity 页面时明显看到一段时间的黑屏，这段时间主要是启动 Flutter 引擎（FlutterEngine），Flutter 引擎启动的时间在不同手机上不同，每一个 FlutterActivity 页面都会重新启动一个Flutter 引擎，所以不要在一个项目中创建多个 FlutterActivity（或者启动多个 FlutterActivity 实例），否则内存会越来越大，为了减少 FlutterActivity 页面的延迟时间和多个 FlutterActivity 实例内存一直增长问题，我们可以缓存 Flutter 引擎（FlutterEngine），在启动 App 的时候先启动 Flutter 引擎，然后使用缓存的引擎加载页面，通常将其放在 Application 中：
public class MyApplication extends Application {
public static final String CACHED_ENGINE_ID = "MY_CACHED_ENGINE_ID";
@Override
public void onCreate() {
super.onCreate();
//在MyApplication中预先初始化Flutter引擎以提升Flutter页面打开速度
FlutterEngine flutterEngine = new FlutterEngine(this);
// Start executing Dart code to pre-warm the FlutterEngine.
flutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());
// Cache the FlutterEngine to be used by FlutterActivity.
FlutterEngineCache.getInstance().put(CACHED_ENGINE_ID, flutterEngine);
}
}
然后在使用的时候：
startActivity(
FlutterActivity
.withCachedEngine(CACHED_ENGINE_ID)
.initialRoute("route1")
.build(MainActivity.this)
);
好了，我们的《Flutter基础之混合开发项目集成之Android篇》已经到结尾了，相信上面的内容还是比较简单易懂的，如果你有什么问题可以给我留言，欢迎大家一起讨论，下面我还会输出《Flutter基础之混合开发项目集成之IOS篇》，大家敬请期待···
网友评论