Flutter 之原生混合开发

Posted 2021-06-26 懂你的大海

参考文档：

• 将 Flutter module 集成到 Android 项目
• flutter add_to_app sample

开始之前，我们需要了解一下 flutter 的四种项目结构

• application：纯 flutter 应用
• plugin：基于原生的 flutter 插件
• package：纯 dart 插件
• module：原生上集成 flutter 模块

一、将 flutter 集成到 android 项目

在原生应用的目录下运行命令：

flutter create -t module --org com.example flutter_lib

会在目录下面生成如下文件： 我们需要将生成 flutter module 集成进我们的 native 应用，集成方法有两种：

• aar 依赖
• 源码依赖

1、flutter module 集成

1、aar 依赖

在 flutter_lib 目录下，我们运行命令：

flutter build aar

很贴心的是，flutter 会在命令行中告诉我们如何在原生应用中去集成 aar

优点：

• 依赖一个包含 Flutter 产物的 aar 包，这个的好处就是其他不开发 flutter 的同学可以不用配置 flutter 环境，它和其他模块包无异

2、源码依赖

打开原生项目的 setting.gradle 文件：

include ':app'
rootProject.name = "NativeToFlutter"

// 加入如下代码
setBinding(new Binding([gradle: this]))                                 
evaluate(new File(                                                      
        'flutter_lib/.android/include_flutter.groovy'                          
))
include ':flutter_lib'

在 app 项目的 build.gradle 依赖 flutter module 模块

dependencies {
  implementation project(':flutter')
}

缺点：

• 需要 flutter 环境，并且各个开发人员环境不一致，导致集成因为版本不一致报各种错误

2、原生接入 flutter 页面

flutter 依赖提供了 FlutterActivity 来直接加载 flutter 页面，我们只需要在清单文件中配置该 Activity ：

<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
  android:theme="@style/LaunchTheme"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
  />

在需要打开 flutter 页面的地方 startActivity 即可：

 val intent = FlutterActivity
            .withNewEngine() 
            // 背景颜色，透明 or 不透明
            .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
            // 指定跳转的路由 home 页面
            .initialRoute("home")
            .build(this)
startActivity(intent)

3、原生指定跳转 Flutter 页面

Flutter 提供 initialRoute 来供原生层跳到 flutter 对应的指定路由页面，官方解释，该路由是有限制的：

当使用已预热的 FlutterEngine 构建 FlutterFragment 时，指定的 Dart 入口是无效的。因为已预热的 FlutterEngine 已经执行了一个入口函数。只有 FlutterEngine 在预热之时是可以明确选择入口的。

所以，我们必须使用 withNewEngine 创建新的引擎来打开一个页面：

 val intent = FlutterActivity
            .withNewEngine() 
            // 指定跳转到 home 路由页面
            .initialRoute("home")
            .build(this)
startActivity(intent)

由于初始化 engine 需要很长的时间，再加上打开指定路由，打开效果十分不理想

4、入口点 EntryPoint

我们在打开 flutter 页面时，默认是从 flutter 的 main 函数开始执行，如果我们有多个独立 flutter 模块供原生层去打开，这就会导致我们的独立模块都必须集中到 main 函数中，然后通过路由的方式来决定打开的模块页面，但路由的方式上面我们已经证明了性能是有多么的糟糕，如果先初始化 flutter engine，就会导致路由效果失效。

很幸运的是，flutter 提供了入口点这个功能，我们可以指定入口点是我们想要跳转的 flutter 页面，并且该功能提前初始化引擎并不影响页面的打开，使用方法很简单，如下：

void main() => runApp(MyApp(Colors.blue));

@pragma('vm:entry-point')
void home() => runApp(HomePage(Colors.green));

对比 main 方法只多了个 pragma 注解，方法名 home 即为 entryPoint。

在 native 层我们就可以写成：

// 在 application 中初始化 home 页面的 flutter engine
val dartEntryPoint = DartExecutor.DartEntrypoint(
  FlutterInjector.instance().flutterLoader().findAppBundlePath(), "home"
)
val engineId = "home_engine_id"
val engine = enginesGroup.createAndRunEngine(app, engineId) // 创建引擎
FlutterEngineCache.getInstance().put(engineId, engine) // 根据引擎 id 缓存 engine
    
// 在原生页面嵌入的 flutter 页面绑定 entrypoint
class MainFlutterActivity : AppCompatActivity(){
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_my_flutter)

        val flutterFragment = FlutterFragment
            	// 指定缓存的 engineId	
                .withCachedEngine("home_engine_id")
                .build<FlutterFragment>()

        supportFragmentManager.beginTransaction()
            .add(R.id.flutter_container, flutterFragment)
            .commit()
    }
}

这时候，原生层直接打开 MainFlutterActivity 即可，效果如下：

5、flutter 热重载

在原生接入 flutter 模块时，我们期望原生项目的运行能够像 flutter 应用开发一样，实时的去调试 flutter 代码。flutter 为我们提供了 flutter attach 命令来调试 flutter 页面，我们只需要运行该命令，然后使项目进入到 flutter 页面即可调试：

我们可以更改 flutter 代码，然后输入指定的 commands 即可，例如输入 r，就会 hot reload 热重载当前页面

6、总结

我们可以画一个依赖图来总结一下：

目前 demo 的 flutter 代码是直接在 flutter module 中进行编码，这种很不适合团队协作开发，不要忘了，flutter 提供了四种项目结构方式，我们可以利用 plugin 和 package 模块进行组件化开发，然后再将组件依赖放入到 flutter module 来集成，这样的话，就可以不干扰其他成员编码

源码 demo ：github.com/MRwangqi/Na…