一纫事、背景
本文示例及源碼基于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
由于公司內(nèi)部需要對原有APP使用flutter進(jìn)行改造棠众，打算分業(yè)務(wù)進(jìn)行模塊化重構(gòu)查坪，故實(shí)踐了下flutter如何作為模塊嵌入到Android原有工程。官方文檔作為學(xué)習(xí)的第一手資料弛针，及時性和準(zhǔn)確性都能得到保證樟结，故先參考了https://flutter.cn/.....上模塊集成的教程進(jìn)行了一些示例demo的編寫无蜂。
二喇完、模塊集成
1.自動集成
- 使用android studio創(chuàng)建一個空的應(yīng)用工程.
- 通過File->New->New Module..創(chuàng)建flutter module,如果已有工程可以通過Import Flutter Module導(dǎo)入。
這樣flutter 模塊就自動集成好了蹬耘。
2.手動集成
通常我們需要把各個業(yè)務(wù)模塊拆分出來芝雪，每個團(tuán)隊(duì)成員負(fù)責(zé)一個模塊的開發(fā)工作，互不干擾综苔。當(dāng)需要集成調(diào)試的時候惩系，在原生殼工程中通過依賴aar或者源碼的方式進(jìn)行調(diào)試即可。源碼依賴的方式適用于flutter代碼與原生交互較多的場景如筛，如果業(yè)務(wù)A的開發(fā)不需要修改B業(yè)務(wù)的代碼堡牡，直接依賴B業(yè)務(wù)的aar包即可。git subsubmodule提供了這樣一種協(xié)作方式杨刨。git submodule 允許你將一個Git 倉庫當(dāng)作另外一個Git 倉庫的子目錄晤柄。通過git subsubmodule可以方便的管理業(yè)務(wù)模塊、基礎(chǔ)模塊等妖胀。具體步驟如下:
- 通過如下命令行創(chuàng)建獨(dú)立module芥颈，
flutter create -t module login_module
- 導(dǎo)入android studio運(yùn)行一下惠勒，會生成.android目錄，結(jié)構(gòu)如下
- 把該項(xiàng)目用git管理起來,模塊是可以單獨(dú)運(yùn)行的爬坑，我們可以在上面開發(fā)業(yè)務(wù)邏輯.
- 在原生android工程中執(zhí)行g(shù)it命令行添加子模塊纠屋，模塊有更新時在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.路由跳轉(zhuǎn)
我們使用自動集成的flutter module描述下如何跳轉(zhuǎn)到單個flutter頁面,添加如下代碼到Activity當(dāng)中:
findViewById<View>(R.id.fab).setOnClickListener {
startActivity(
FlutterActivity.createDefaultIntent(this)
)
}
運(yùn)行APP,實(shí)際效果如下,出現(xiàn)了很明顯的黑屏現(xiàn)象,主要原因是flutterEngine初始化造成的卡頓,想要最小化這個延遲時間，可以在Application中提前初始化一個 FlutterEngine盾计，然后使用這個已經(jīng)預(yù)熱好的 FlutterEngine加載FlutterActivity:
三巾遭、源碼分析
FlutterActivity
通過android studio右側(cè)工具欄查看FlutterActivity的結(jié)構(gòu),點(diǎn)擊方法名可以快速定位到我們需要分析的方法
FlutterActivity的繼承結(jié)構(gòu)如下:
Host接口對通用方法進(jìn)行了抽象，FlutterActivity和FlutterFragment負(fù)責(zé)實(shí)現(xiàn),內(nèi)部包括Lifecycle闯估、上下文、getInitialRoute吼和、getAppBundlePath等方法,我們可以繼承FlutterActivity重寫部分方法,實(shí)現(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
委托類實(shí)現(xiàn)了 FlutterActivity和FlutterFragment中所有相同的Flutter邏輯.包括設(shè)置引擎、創(chuàng)建視圖炫乓、給flutter
分發(fā)生命周期事件刚夺、執(zhí)行dart代碼等功能.
-
onCreateView方法負(fù)責(zé)ContentView的創(chuàng)建,內(nèi)部根據(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;
}
- 調(diào)用
flutterView#attachToFlutterEngine方法之后flutterEngine開始渲染FlutterView,此時已經(jīng)可以轉(zhuǎn)發(fā)來自
FlutterView的事件到綁定的flutterEngine了，例如用戶觸摸事件,無障礙服務(wù)事件末捣，鍵盤事件等侠姑。
3.FlutterActivity在OnStart時調(diào)用代理類相應(yīng)的方法,內(nèi)部開始執(zhí)行dart代碼:
>FlutterActivityAndFragmentDelegate.java
void onStart() {
Log.v(TAG, "onStart()");
ensureAlive();
doInitialFlutterViewRun();
}
4.doInitialFlutterViewRun方法內(nèi)部會先判斷dart是否被執(zhí)行過,如果是話就不再執(zhí)行了,接著獲取到資源路徑并加載
>FlutterActivityAndFragmentDelegate.java
private void doInitialFlutterViewRun() {
if (host.getCachedEngineId() != null) {
return;
}
if (flutterEngine.getDartExecutor().isExecutingDart()) {
return;
}
//STEP1 通過flutter/navigation方法通道往dart發(fā)送設(shè)置初始化路由的事件
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當(dāng)中的io.flutter.Entrypoint屬性設(shè)置dart代碼的執(zhí)行入口,默認(rèn)情況是main方法
DartExecutor.DartEntrypoint entrypoint =
new DartExecutor.DartEntrypoint(
appBundlePathOverride, host.getDartEntrypointFunctionName());
//STEP4 調(diào)用C++層代碼將main方法喚起,后面就是dart層的工作了,也就是進(jìn)行widget解析渲染等.
flutterEngine.getDartExecutor().executeDartEntrypoint(entrypoint);
}
5.看上面代碼標(biāo)注的STEP1,全局搜索flutter/navigation關(guān)鍵字,找到SystemChannels.navigation 是通道在dart中具體的實(shí)現(xiàn),ALT+單擊 navigation 發(fā)現(xiàn)調(diào)用處可能是在WidgetsBinding中,但是這里并沒有對IinitialRoute進(jìn)行處理,在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設(shè)置.
以上是flutterActivity加載頁面的基本流程，搭建可用的混合路由方案還需要很多細(xì)節(jié)要處理箩做，比如閃屏莽红、engine復(fù)用、路由堆棧切換等等邦邦。
