之前介紹過在原生工程內(nèi)嵌入Flutter，以頁面形式或者View的形式嵌入都是可以的，最近看Flutter源碼發(fā)現(xiàn)Flutter還支持在Flutter布局中嵌入原生View，這個特性在文檔中還沒有介紹，但是確實是一個非常實用的特性，比如困擾已久的地圖實現(xiàn)，有了這個特性我們就可以在Flutter布局中嵌入雙平臺的原生高德地圖或百度地圖，甚至是相機預(yù)覽視頻通話SDK等。
本篇一個簡單的TextView為示例，介紹如何在Flutter工程中嵌入原生組件。

圖片預(yù)覽

創(chuàng)建Flutter工程

原生組件擴展比較規(guī)范的寫法是創(chuàng)建插件工程，然后讓Flutter工程引入插件工程使用，本篇為了方便，直接在Flutter工程編寫組件并注冊，插件工程的開發(fā)以后再介紹。
使用AndroidStudio創(chuàng)建一個普通的Flutter工程，修改main.dar文件，移除不必要的代碼便于演示，整理后代碼如下：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(

      ),
    );
  }

}

在Android工程中編寫并注冊原生組件

添加原生組件的流程基本是這樣的：
1.實現(xiàn)原生組件PlatformView提供原生view
2.創(chuàng)建PlatformViewFactory用于生成PlatformView
3.創(chuàng)建FlutterPlugin用于注冊原生組件

創(chuàng)建原生組件

在FLutter工程生成了幾個文件夾，lib是放Flutter工程代碼，android和ios文件夾分別是對應(yīng)的雙平臺的原生工程，這里直接打開Android工程目錄，項目默認生成了GeneratedPluginRegistrant和MainActivity兩個文件，GeneratedPluginRegistrant不要動，在和MainActivity的包下新建自定義View，F(xiàn)lutter的原生View不能直接繼承自View，需要實現(xiàn)提供的PlatformView接口：

public class MyView implements PlatformView {

    private final TextView myNativeView;

    MyView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        TextView myNativeView = new TextView(context);
        myNativeView.setText("我是來自Android的原生TextView");
        this.myNativeView = myNativeView;
    }

    @Override
    public View getView() {
        return myNativeView;
    }

    @Override
    public void dispose() {

    }
}

這是一個包裝類，在實現(xiàn)的getView方法中返回原生的View對象給Flutter，這里便于演示，返回一個TextView。

創(chuàng)建PlatformViewFactory

接下來創(chuàng)建PlatformViewFactory，創(chuàng)建一個類繼承自PlatformViewFactory：

public class MyViewFactory extends PlatformViewFactory {
    private final BinaryMessenger messenger;

    public MyViewFactory(BinaryMessenger messenger) {
        super(StandardMessageCodec.INSTANCE);
        this.messenger = messenger;
    }

    @SuppressWarnings("unchecked")
    @Override
    public PlatformView create(Context context, int id, Object args) {
        Map<String, Object> params = (Map<String, Object>) args;
        return new MyView(context, messenger, id, params);
    }

在create方法中能夠獲取到三個參數(shù)，args是由Flutter傳過來的自定義參數(shù)，這里暫時用不到。

注冊插件

創(chuàng)建一個插件類MyViewFlutterPlugin，并在類的靜態(tài)方法中寫上注冊邏輯供調(diào)用：

public class MyViewFlutterPlugin {
    public static void registerWith(PluginRegistry registry) {
        final String key = MyViewFlutterPlugin.class.getCanonicalName();

        if (registry.hasPlugin(key)) return;

        PluginRegistry.Registrar registrar = registry.registrarFor(key);
        registrar.platformViewRegistry().registerViewFactory("plugins.nightfarmer.top/myview", new MyViewFactory(registrar.messenger()));
    }
}

上面代碼中使用了plugins.nightfarmer.top/myview這樣一個字符串，這是組件的注冊名稱，在Flutter調(diào)用時需要用到，你可以使用任意格式的字符串。
在MainActivity的onCreate方法中增加注冊調(diào)用

 MyViewFlutterPlugin.registerWith(this);

因為這里是直接在Flutter工程中編寫的，所以也可以直接把注冊邏輯寫在Activity中，為了和插件工程的注冊流程保持一致，還是建議抽出來寫。

在Flutter工程中調(diào)用原生View

原生View的調(diào)用非常簡單，在使用Android平臺的view只需要創(chuàng)建AndroidView組件并告訴它組件的注冊注冊名稱即可：

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AndroidView(viewType: 'plugins.nightfarmer.top/myview'),
      ),
    );
  }

}

因為只是實現(xiàn)了Android平臺，所以這里直接調(diào)用了AndroidView，如果你是雙平臺的實現(xiàn)，則可以通過引入package:flutter/foundation.dart包，并判斷defaultTargetPlatform是TargetPlatform.android還是TargetPlatform.iOS來引入不同平臺的實現(xiàn)。

給原生view增加參數(shù)

某些情況下，需要給原生組件提供一些初始化參數(shù)，比如webview的url，比如地圖的中心坐標(biāo)，又比如上面示例的中文本內(nèi)容，我們傳入一個map即可實現(xiàn)：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    print(defaultTargetPlatform);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AndroidView(
          viewType: 'plugins.nightfarmer.top/myview',
          creationParams: {
            "myContent": "通過參數(shù)傳入的文本內(nèi)容",
          },
          creationParamsCodec: const StandardMessageCodec(),
        ),
      ),
    );
  }
}

creationParams傳入了一個map參數(shù)，并由原生組件接收，creationParamsCodec傳入的是一個編碼對象這是固定寫法。
然后在原生組件中接收參數(shù)并初始化TextView的文本：

public class MyView implements PlatformView {

    private final TextView myNativeView;

    MyView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        TextView myNativeView = new TextView(context);
        myNativeView.setText("我是來自Android的原生TextView");
        this.myNativeView = myNativeView;
        if (params.containsKey("myContent")) {
            String myContent = (String) params.get("myContent");
            myNativeView.setText(myContent);
        }
    }

    ...
}

有一點需要注意的是，原生組件初始化的參數(shù)并不會隨著setState重復(fù)賦值，也就是說這種是init參數(shù)。
關(guān)于如何更改已經(jīng)實例化的原生組件的狀態(tài)，可以通過MethodCall來實現(xiàn)，看下面

通過MethodChannel與原生組件通訊

首先讓原始組件實現(xiàn)MethodCallHandler接口：

public class MyView implements PlatformView, MethodChannel.MethodCallHandler {

    private final TextView myNativeView;

    MyView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        ...
        MethodChannel methodChannel = new MethodChannel(messenger, "plugins.nightfarmer.top/myview_" + id);
        methodChannel.setMethodCallHandler(this);
    }
    
    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
         // 在接口的回調(diào)方法中可以接收到來自Flutter的調(diào)用
    }
    ...
}

然后在dart代碼中做如下處理：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    print(defaultTargetPlatform);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AndroidView(
          viewType: 'plugins.nightfarmer.top/myview',
          creationParams: {
            "myContent": "通過參數(shù)傳入的文本內(nèi)容",
          },
          creationParamsCodec: const StandardMessageCodec(),
          onPlatformViewCreated: onMyViewCreated,
        ),
      ),
    );
  }

  MethodChannel _channel;

  void onMyViewCreated(int id) {
    _channel = new MethodChannel('plugins.nightfarmer.top/myview_$id');
    setMyViewText();
  }

  Future<void> setMyViewText(String text) async {
    assert(text != null);
    return _channel.invokeMethod('setText', text);
  }
}

通過onPlatformViewCreated回調(diào)，監(jiān)聽原始組件成功創(chuàng)建，并能夠在回調(diào)方法的參數(shù)中拿到當(dāng)前組件的id，這個id是系統(tǒng)隨機分配的，然后通過這個分配的id加上我們的組件名稱最為前綴創(chuàng)建一個和組件通訊的MethodChannel，拿到channel對象之后就可以通過invokeMethod方法向原生組件發(fā)送消息了，這里這里發(fā)送的是‘setText’這個消息，并帶上文本內(nèi)容，下面在原生組件中處理消息的接收邏輯。

    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        if ("setText".equals(methodCall.method)) {
            String text = (String) methodCall.arguments;
            myNativeView.setText(text);
            result.success(null);
        }
    }

onMethodCall的處理方式和正常的插件擴展是一致的，這里不再贅述。

性能如何

通過一個ListView來實例化多個原生組件，看看效果如何：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    print(defaultTargetPlatform);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Container(
            child: AndroidView(
              viewType: 'plugins.nightfarmer.top/myview',
              creationParams: {
                "myContent": "通過參數(shù)傳入的文本內(nèi)容$index",
              },
              creationParamsCodec: const StandardMessageCodec(),
            ),
            height: 100,
          );
        },
        itemCount: 100,
      ),
    );
  }
}

這樣寫雖然跑起來了，ListView也確實能夠正?；瑒?，但是能夠感受到明顯的掉幀，可見在一個界面中實例化多個原生組件的情況對性能的影響非常的大，也不建議在實際開發(fā)中大量引入原生組件，因為除去地圖/WebView等特殊情況，基本上原生能實現(xiàn)的UI效果Flutter的UI引擎都能實現(xiàn)。

在開發(fā)原生組件時，F(xiàn)lutter的熱加載是無效的，因為每次都需要編譯原生工程才能使之生效。另外我這里的Mac環(huán)境用Genymotion是無法正常運行的，需要使用真機并不使用--enable-software-rendering參數(shù)才可以。

本篇完。

更多干貨移步我的個人博客 https://www.nightfarmer.top/