一、背景
本文示例及源碼基于Flutter 1.22.4 ? channel stable ? https://github.com/flutter/flutter.git
Framework ? revision (9 weeks ago) ? 2020-11-13
Tools ? Dart 2.10.4
由于公司內部需要對原有APP使用flutter進行改造，打算分業(yè)務進行模塊化重構，故實踐了下flutter如何作為模塊嵌入到Android原有工程。官方文檔作為學習的第一手資料，及時性和準確性都能得到保證，故先參考了https://flutter.cn/.....上模塊集成的教程進行了一些示例demo的編寫。
二、模塊集成
1.自動集成
- 使用android studio創(chuàng)建一個空的應用工程.
- 通過File->New->New Module..創(chuàng)建flutter module,如果已有工程可以通過Import Flutter Module導入。
這樣flutter 模塊就自動集成好了。
2.手動集成
通常我們需要把各個業(yè)務模塊拆分出來，每個團隊成員負責一個模塊的開發(fā)工作，互不干擾。當需要集成調試的時候，在原生殼工程中通過依賴aar或者源碼的方式進行調試即可。源碼依賴的方式適用于flutter代碼與原生交互較多的場景，如果業(yè)務A的開發(fā)不需要修改B業(yè)務的代碼，直接依賴B業(yè)務的aar包即可。git subsubmodule提供了這樣一種協(xié)作方式。git submodule 允許你將一個Git 倉庫當作另外一個Git 倉庫的子目錄。通過git subsubmodule可以方便的管理業(yè)務模塊、基礎模塊等。具體步驟如下:
- 通過如下命令行創(chuàng)建獨立module，
flutter create -t module login_module
- 導入android studio運行一下，會生成.android目錄，結構如下
- 把該項目用git管理起來,模塊是可以單獨運行的，我們可以在上面開發(fā)業(yè)務邏輯.
- 在原生android工程中執(zhí)行git命令行添加子模塊，模塊有更新時在update一下即可
git submodule add {flutter module的倉庫地址}
git submodule update
- 原生工程的setting.gradle加入如下配置：
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new// new
'login_module/.android/include_flutter.groovy' // new
))
- 在工程app模塊的build.gradle文件中引入對 Flutter 模塊的依賴：
dependencies {
implementation project(':flutter')
}
3.路由跳轉
我們使用自動集成的flutter module描述下如何跳轉到單個flutter頁面,添加如下代碼到Activity當中:
findViewById<View>(R.id.fab).setOnClickListener {
startActivity(
FlutterActivity.createDefaultIntent(this)
)
}
運行APP,實際效果如下,出現(xiàn)了很明顯的黑屏現(xiàn)象,主要原因是flutterEngine初始化造成的卡頓,想要最小化這個延遲時間，可以在Application中提前初始化一個 FlutterEngine，然后使用這個已經預熱好的 FlutterEngine加載FlutterActivity:
三、源碼分析
FlutterActivity
通過android studio右側工具欄查看FlutterActivity的結構,點擊方法名可以快速定位到我們需要分析的方法
FlutterActivity的繼承結構如下:
Host接口對通用方法進行了抽象，FlutterActivity和FlutterFragment負責實現(xiàn),內部包括Lifecycle、上下文、getInitialRoute、getAppBundlePath等方法,我們可以繼承FlutterActivity重寫部分方法,實現(xiàn)自定義flutterEngine、自定義AppBundlePath等.
先從OnCreate開始:
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
switchLaunchThemeForNormalTheme();
super.onCreate(savedInstanceState);
lifecycle.handleLifecycleEvent(Lifecycle.Event.ON_CREATE);
//創(chuàng)建委托類
delegate = new FlutterActivityAndFragmentDelegate(this);
delegate.onAttach(this);
delegate.onActivityCreated(savedInstanceState);
configureWindowForTransparency();
//createFlutterView會委托給delegate的onCreateView方法
setContentView(createFlutterView());
configureStatusBarForFullscreenFlutterExperience();
}
FlutterActivityAndFragmentDelegate
委托類實現(xiàn)了 FlutterActivity和FlutterFragment中所有相同的Flutter邏輯.包括設置引擎、創(chuàng)建視圖、給flutter
分發(fā)生命周期事件、執(zhí)行dart代碼等功能.
-
onCreateView方法負責ContentView的創(chuàng)建,內部根據(jù)渲染模式的不同會創(chuàng)建FlutterTextureView或者FlutterSurfaceView,隨后將flutterEngine綁定到新建出來的FlutterView
>FlutterActivityAndFragmentDelegate.java
@NonNull
View onCreateView(
LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
...
if (host.getRenderMode() == RenderMode.surface) {
flutterView = new FlutterView(host.getActivity(), flutterSurfaceView);
} else {
FlutterTextureView flutterTextureView = new FlutterTextureView(host.getActivity());
...
flutterView = new FlutterView(host.getActivity(), flutterTextureView);
}
flutterSplashView = new FlutterSplashView(host.getContext());
...
flutterSplashView.displayFlutterViewWithSplash(flutterView, host.provideSplashScreen());
flutterView.attachToFlutterEngine(flutterEngine);
return flutterSplashView;
}
- 調用
flutterView#attachToFlutterEngine方法之后flutterEngine開始渲染FlutterView,此時已經可以轉發(fā)來自
FlutterView的事件到綁定的flutterEngine了，例如用戶觸摸事件,無障礙服務事件，鍵盤事件等。
3.FlutterActivity在OnStart時調用代理類相應的方法,內部開始執(zhí)行dart代碼:
>FlutterActivityAndFragmentDelegate.java
void onStart() {
Log.v(TAG, "onStart()");
ensureAlive();
doInitialFlutterViewRun();
}
4.doInitialFlutterViewRun方法內部會先判斷dart是否被執(zhí)行過,如果是話就不再執(zhí)行了,接著獲取到資源路徑并加載
>FlutterActivityAndFragmentDelegate.java
private void doInitialFlutterViewRun() {
if (host.getCachedEngineId() != null) {
return;
}
if (flutterEngine.getDartExecutor().isExecutingDart()) {
return;
}
//STEP1 通過flutter/navigation方法通道往dart發(fā)送設置初始化路由的事件
if (host.getInitialRoute() != null) {
flutterEngine.getNavigationChannel().setInitialRoute(host.getInitialRoute());
}
//STEP2 獲取bundle資源路徑
String appBundlePathOverride = host.getAppBundlePath();
if (appBundlePathOverride == null || appBundlePathOverride.isEmpty()) {
appBundlePathOverride = FlutterInjector.instance().flutterLoader().findAppBundlePath();
}
//STEP3 這里可以自定義manifest.xnl當中的io.flutter.Entrypoint屬性設置dart代碼的執(zhí)行入口,默認情況是main方法
DartExecutor.DartEntrypoint entrypoint =
new DartExecutor.DartEntrypoint(
appBundlePathOverride, host.getDartEntrypointFunctionName());
//STEP4 調用C++層代碼將main方法喚起,后面就是dart層的工作了,也就是進行widget解析渲染等.
flutterEngine.getDartExecutor().executeDartEntrypoint(entrypoint);
}
5.看上面代碼標注的STEP1,全局搜索flutter/navigation關鍵字,找到SystemChannels.navigation 是通道在dart中具體的實現(xiàn),ALT+單擊 navigation 發(fā)現(xiàn)調用處可能是在WidgetsBinding中,但是這里并沒有對IinitialRoute進行處理,在app.dart下對初始路由有說明.
>binding.dart
mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
@override
void initInstances() {
super.initInstances();
...
SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);
}
}
查看app.dart中的 initialRoute 注釋可以知道,初始路由的值是在window.dart的 defaultRouteName,該值可以在Android中通過NewEngineIntentBuilder#initialRoute設置.
以上是flutterActivity加載頁面的基本流程，搭建可用的混合路由方案還需要很多細節(jié)要處理，比如閃屏、engine復用、路由堆棧切換等等。
