之前介紹過在原生工程內(nèi)嵌入Flutter，以頁面形式或者View的形式嵌入都是可以的，最近看Flutter源碼發(fā)現(xiàn)Flutter還支持在Flutter布局中嵌入原生View，這個(gè)特性在文檔中還沒有介紹，但是確實(shí)是一個(gè)非常實(shí)用的特性，比如困擾已久的地圖實(shí)現(xiàn)，有了這個(gè)特性我們就可以在Flutter布局中嵌入雙平臺的原生高德地圖或百度地圖，甚至是相機(jī)預(yù)覽視頻通話SDK等。
本篇一個(gè)簡單的TextView為示例，介紹如何在Flutter工程中嵌入原生組件。
創(chuàng)建Flutter工程
原生組件擴(kuò)展比較規(guī)范的寫法是創(chuàng)建插件工程，然后讓Flutter工程引入插件工程使用，本篇為了方便，直接在Flutter工程編寫組件并注冊，插件工程的開發(fā)以后再介紹。
使用AndroidStudio創(chuàng)建一個(gè)普通的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.實(shí)現(xiàn)原生組件PlatformView提供原生view
2.創(chuàng)建PlatformViewFactory用于生成PlatformView
3.創(chuàng)建FlutterPlugin用于注冊原生組件
創(chuàng)建原生組件
在FLutter工程生成了幾個(gè)文件夾，lib是放Flutter工程代碼，android和ios文件夾分別是對應(yīng)的雙平臺的原生工程，這里直接打開Android工程目錄，項(xiàng)目默認(rèn)生成了GeneratedPluginRegistrant和MainActivity兩個(gè)文件，GeneratedPluginRegistrant不要?jiǎng)樱诤蚆ainActivity的包下新建自定義View，F(xiàn)lutter的原生View不能直接繼承自View，需要實(shí)現(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() {
}
}
這是一個(gè)包裝類，在實(shí)現(xiàn)的getView方法中返回原生的View對象給Flutter，這里便于演示，返回一個(gè)TextView。
創(chuàng)建PlatformViewFactory
接下來創(chuàng)建PlatformViewFactory，創(chuàng)建一個(gè)類繼承自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方法中能夠獲取到三個(gè)參數(shù)，args是由Flutter傳過來的自定義參數(shù)，這里暫時(shí)用不到。
注冊插件
創(chuàng)建一個(gè)插件類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這樣一個(gè)字符串，這是組件的注冊名稱，在Flutter調(diào)用時(shí)需要用到，你可以使用任意格式的字符串。
在MainActivity的onCreate方法中增加注冊調(diào)用
MyViewFlutterPlugin.registerWith(this);
因?yàn)檫@里是直接在Flutter工程中編寫的，所以也可以直接把注冊邏輯寫在Activity中，為了和插件工程的注冊流程保持一致，還是建議抽出來寫。
在Flutter工程中調(diào)用原生View
原生View的調(diào)用非常簡單，在使用Android平臺的view只需要?jiǎng)?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'),
),
);
}
}
因?yàn)橹皇菍?shí)現(xiàn)了Android平臺，所以這里直接調(diào)用了AndroidView，如果你是雙平臺的實(shí)現(xiàn)，則可以通過引入package:flutter/foundation.dart包，并判斷defaultTargetPlatform是TargetPlatform.android還是TargetPlatform.iOS來引入不同平臺的實(shí)現(xiàn)。
給原生view增加參數(shù)
某些情況下，需要給原生組件提供一些初始化參數(shù)，比如webview的url，比如地圖的中心坐標(biāo)，又比如上面示例的中文本內(nèi)容，我們傳入一個(gè)map即可實(shí)現(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傳入了一個(gè)map參數(shù)，并由原生組件接收，creationParamsCodec傳入的是一個(gè)編碼對象這是固定寫法。
然后在原生組件中接收參數(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);
}
}
...
}
有一點(diǎn)需要注意的是，原生組件初始化的參數(shù)并不會隨著setState重復(fù)賦值，也就是說這種是init參數(shù)。
關(guān)于如何更改已經(jīng)實(shí)例化的原生組件的狀態(tài)，可以通過MethodCall來實(shí)現(xiàn)，看下面
通過MethodChannel與原生組件通訊
首先讓原始組件實(shí)現(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，這個(gè)id是系統(tǒng)隨機(jī)分配的，然后通過這個(gè)分配的id加上我們的組件名稱最為前綴創(chuàng)建一個(gè)和組件通訊的MethodChannel，拿到channel對象之后就可以通過invokeMethod方法向原生組件發(fā)送消息了，這里這里發(fā)送的是‘setText’這個(gè)消息，并帶上文本內(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的處理方式和正常的插件擴(kuò)展是一致的，這里不再贅述。
性能如何
通過一個(gè)ListView來實(shí)例化多個(gè)原生組件，看看效果如何：
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也確實(shí)能夠正常滑動(dòng)，但是能夠感受到明顯的掉幀，可見在一個(gè)界面中實(shí)例化多個(gè)原生組件的情況對性能的影響非常的大，也不建議在實(shí)際開發(fā)中大量引入原生組件，因?yàn)槌サ貓D/WebView等特殊情況，基本上原生能實(shí)現(xiàn)的UI效果Flutter的UI引擎都能實(shí)現(xiàn)。
在開發(fā)原生組件時(shí)，F(xiàn)lutter的熱加載是無效的，因?yàn)槊看味夹枰幾g原生工程才能使之生效。另外我這里的Mac環(huán)境用Genymotion是無法正常運(yùn)行的，需要使用真機(jī)并不使用
--enable-software-rendering參數(shù)才可以。
本篇完。
更多干貨移步我的個(gè)人博客 https://www.nightfarmer.top/
