[[414625]]

本文轉(zhuǎn)載自微信公眾號(hào)「微醫(yī)大前端技術(shù)」，作者周建華。轉(zhuǎn)載本文請(qǐng)聯(lián)系微醫(yī)大前端技術(shù)公眾號(hào)。

前言

Flutter 2 主要帶來(lái)的新特性有 Null 安全性趨于穩(wěn)定，桌面和 Web 支持也正式宣布進(jìn)入 stable 渠道,最受大家關(guān)注的就是 Add-to-App 相關(guān)的更新，從而改善 Flutter2 之前的版本混合開(kāi)發(fā)體驗(yàn)不好缺點(diǎn)。所謂的 Add-to-App 就是將 Flutter 添加到現(xiàn)有的 iOS 和 Android 應(yīng)用程序中來(lái)利用 Flutter，在兩個(gè)移動(dòng)平臺(tái)上復(fù)用 Flutter 代碼同時(shí)仍保留現(xiàn)有本機(jī)代碼庫(kù)的絕佳方法。在此方案出現(xiàn)之前，類(lèi)似的第三方支持有 flutter_boost 、flutter_thrio 等，但是這些方案都要面對(duì)的問(wèn)題是：非官方的支持必然存在每個(gè)版本需要適配的問(wèn)題，而按照 Flutter 目前更新的速度，很可能每個(gè)季度的版本都存在較大的變動(dòng)，所以如果開(kāi)發(fā)者不維護(hù)或者維護(hù)不及時(shí)，那么侵入性極強(qiáng)的這類(lèi)框架很容易就成為項(xiàng)目的瓶頸。

Flutter2 多引擎混合開(kāi)發(fā)基本用法

1、先創(chuàng)建一個(gè) Android 原生工程，( Android 原生項(xiàng)目工程創(chuàng)建過(guò)程略過(guò))

2、Android 項(xiàng)目創(chuàng)建引入 Flutter Module，使用 File -> New- > New Module … -> 選擇 Flutter Module ，然后指定一個(gè) module name，填寫(xiě)相關(guān)息，最后點(diǎn)擊確定，等待 Gradle sync 完成。

3、Android 項(xiàng)目集成 Flutter Module

1)創(chuàng)建 FlutterEngineGroup 對(duì)象，F(xiàn)lutterEngineGroup 可以用來(lái)管理多個(gè) FlutterEngine 對(duì)象，多個(gè) FlutterEngine 之間是可以共享資源的，這樣多個(gè) FlutterEngine 占用的資源相對(duì)會(huì)少一些，F(xiàn)lutterEngineGroup 需要在 Application onCreate 方法中創(chuàng)建。

package com.zalex.hybird; 
 
import android.app.Application; 
import io.flutter.embedding.engine.FlutterEngineGroup; 
 
public class WYApplication extends Application { 
    public FlutterEngineGroup engineGroup; 
    @Override 
    public void onCreate() { 
        super.onCreate(); 
        // 創(chuàng)建 FlutterEngineGroup 對(duì)象 
        engineGroup = new FlutterEngineGroup(this); 
    } 
} 

2)創(chuàng)建 WYFlutterEngineManager 緩存管理類(lèi),通過(guò) FlutterEngineCache 緩存類(lèi)，先從中獲取緩存的 FlutterEngine，如果沒(méi)有取到，通過(guò) findAppBundlePath 和 entrypoint 創(chuàng)建出 DartEntrypoint 對(duì)象，這里的 findAppBundlePath 主要就是默認(rèn)的 flutter_assets 目錄;而 entrypoint 其實(shí)就是 dart 代碼里啟動(dòng)方法的名稱(chēng);也就綁定了在 dart 中 runApp 的方法，再通過(guò) createAndRunEngine 方法創(chuàng)建一個(gè) FlutterEngine，然后緩存起來(lái)。

public class WYFlutterEngineManager { 
    public static FlutterEngine flutterEngine(Context context, String engineId, String entryPoint) { 
        // 1. 從緩存中獲取 FlutterEngine 
        FlutterEngine engine = FlutterEngineCache.getInstance().get(engineId); 
        if (engine == null) { 
            // 如果緩存中沒(méi)有 FlutterEngine 
            // 1. 新建 FlutterEngine，執(zhí)行的入口函數(shù)是 entryPoint 
           WYApplication app = (WYApplication) context.getApplicationContext(); 
           DartExecutor.DartEntrypoint dartEntrypoint = new DartExecutor.DartEntrypoint(FlutterInjector.instance().flutterLoader().findAppBundlePath(), entryPoint); 
           engine = app.engineGroup.createAndRunEngine(context, dartEntrypoint); 
            // 2. 存入緩存 
            FlutterEngineCache.getInstance().put(engineId, engine); 
        } 
        return engine; 
    } 
} 

Activity 綁定 flutter 引擎入口

public class WYFlutterActivity extends FlutterActivity implements EngineBindingsDelegate { 
    private WYFlutterBindings flutterBindings; 
 
    @Override 
    protected void onCreate(@Nullable @org.jetbrains.annotations.Nullable Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        flutterBindings = new WYFlutterBindings(this,SingleFlutterActivity.class.getSimpleName(),"main",this); 
        flutterBindings.attach(); 
    } 
    @Override 
    protected void onDestroy() { 
        super.onDestroy(); 
        flutterBindings.detach(); 
    } 
 
    @Override 
   public FlutterEngine provideFlutterEngine(@NonNull @NotNull Context context)  { 
        return flutterBindings.getEngine(); 
    } 
 
    @Override 
    public void onNext() { 
        Intent flutterIntent = new Intent(this, MainActivity.class); 
        startActivity(flutterIntent); 
    } 
} 

Fragment 綁定 flutter 引擎入口

int engineId = engineId ;//自定義引擎 Id 
int fragmentId = 1233444;//自定義 FragmentId 
 
FrameLayout flutterContainer = new FrameLayout(this); 
root.addView(flutterContainer); 
flutterContainer.setId(containerId); 
flutterContainer.setLayoutParams(new LinearLayout.LayoutParams( 
        FrameLayout.LayoutParams.MATCH_PARENT, 
        FrameLayout.LayoutParams.MATCH_PARENT, 
        1.0f 
)); 
 
WYFlutterBindings  flutterBindings = new WYFlutterBindings(this,"WYTopFragment","fragmentMain",this); 
 
FlutterEngine engine =  bottomBindings.getEngine(); 
 
FlutterEngineCache.getInstance().put(engineId+"", engine); 
Fragment flutterFragment =FlutterFragment.withCachedEngine(engineId+"").build(); 
fragmentManager 
        .beginTransaction() 
        .add(containerId, flutterFragment) 
        .commit(); 

3)flutter 模塊引擎入口綁定，除了 main 入口,其他引擎入口都需要加上@pragma('vm:entry-point')注解

void main() => runApp(MyApp(Colors.blue)); 
 
@pragma('vm:entry-point') 
void fragmentMain() => runApp(CustomApp(Colors.green)); 

Flutter2多引擎混合開(kāi)發(fā)與單引擎混合開(kāi)發(fā)比較

1、 Flutter 多引擎方案是 flutter api 一直都是可以支持的，可以創(chuàng)建多個(gè)引擎，也可以渲染多個(gè)不同的界面，也是獨(dú)立的，但是每次啟動(dòng)一個(gè) flutter 引擎，都會(huì)占一個(gè)獨(dú)立的引擎，通過(guò)測(cè)試可以發(fā)現(xiàn),一個(gè)引擎 40M,創(chuàng)建 10 個(gè)引擎消耗了 235M，對(duì)內(nèi)存的占用很大，在開(kāi)發(fā)中是不可接受的。

2、由于 Flutter 2 之前版本多引擎的缺陷，業(yè)內(nèi)的做法一般是對(duì) isolate 或 engine 進(jìn)行復(fù)用來(lái)解決。影響力較大的是以 FlutterBoost 和 Thrio 為代表的單引擎瀏覽器方案。即把 Activity/ViewController 作為承載 Dart 頁(yè)面的瀏覽器，在頁(yè)面切換時(shí)對(duì)單引擎進(jìn)行 detach/attach，同時(shí)通知 Dart 層頁(yè)面切換，來(lái)實(shí)現(xiàn) Engine 的復(fù)用。由于只持有了一個(gè) Engine 單例，僅創(chuàng)建一份 isolate，Dart 層是通信和資源共享的，內(nèi)存損耗也得以有顯著的降低。但是單引擎實(shí)現(xiàn)依賴(lài)于修改官方的 io.flutter 包，對(duì) flutter 框架做出比較大的結(jié)構(gòu)性修改。

3、從 Flutter 2 開(kāi)始，多引擎下使用 FlutterEngineGroup 來(lái)創(chuàng)建新的 Engine，官方宣稱(chēng)內(nèi)存損耗僅占 180K，其本質(zhì)是使 Engine 可以共享 GPU 上下文、字形和 isolate group snapshot，從而實(shí)現(xiàn)了更快的初始速度和更低的內(nèi)存占用。

4、Flutter 2 與 Flutter 1 創(chuàng)建引擎的區(qū)別:

Flutter1 引擎創(chuàng)建

//Android 
val engine = FlutterEngine(this) 
engine.dartExecutor.executeDartEntrypoin(DartExecutor.DartEntrypoint.createDefault()) 
FlutterEngineCache.getInstance().put(1,engine) 
val intent = FlutterActivity.withCacheEngine(1).build(this) 

//iOS 
let engine = FlutterEngine() 
engine.run() 
let vc = FlutterViewController(engine:engine,nibName:nil,bundle:nil) 

Fluter2 引擎創(chuàng)建

//Android 
val engineGroup = FlutterEngineGroup(context) 
val engine1 = engineGroup.createAndRunDefaultEngine(context) 
val engine2 = engineGroup.createAndRunEngine(context,DartExecutor.DartEntrypoint(FlutterInjector.instance().flutterLoader().findAppBundlePath(),"anotherEntrypoint")) 

//iOS 
let engineGroup = FlutterEngineGroup(name:"example",project:nil) 
let engine1 = engineGroup.makeEngine(withEntrypoint:nil,libraryURI:nil) 
let engine2 = engineGroup.makeEngine(withEntrypoint:"anotherEntrypoint",libraryURI:nil) 

5、Flutter 混合開(kāi)發(fā)方案比較

6、Flutter 輕量級(jí)多引擎和單引擎優(yōu)缺點(diǎn)比較

后記 

本文通過(guò)代碼和表格,我們講述了 Flutter 2 多引擎使用、多引擎混合開(kāi)發(fā)與單引擎混合開(kāi)發(fā)區(qū)別和優(yōu)缺點(diǎn)比較,下一節(jié)我們將一起去學(xué)習(xí) Flutter 2 多引擎的實(shí)現(xiàn)原理。