Flutter 混合開發(fā)系列 包含如下：
- 嵌入原生View-Android
- 嵌入原生View-IOS
- 與原生通信-MethodChannel
- 與原生通信-BasicMessageChannel
- 與原生通信-EventChannel
- 添加 Flutter 到 Android Activity
- 添加 Flutter 到 Android Fragment
- 添加 Flutter 到 iOS
每個工作日分享一篇纠永，歡迎關(guān)注、點贊及轉(zhuǎn)發(fā)席镀。
AndroidView
建議使用 Android Studio 進行開發(fā)马胧，在 Android Studio 左側(cè) project tab下選中 android 目錄下任意一個文件，右上角會出現(xiàn) Open for Editing in Android Studio ，
點擊即可打開，打開后 project tab 并不是一個 Android 項目，而是項目中所有 Android 項目蜕琴，包含第三方：
app 目錄是當前項目的 android 目錄，其他則是第三方的 android 目錄宵溅。
在App 項目的 java/包名 目錄下創(chuàng)建嵌入 Flutter 中的 Android View凌简，此 View 繼承 PlatformView ：
class MyFlutterView(context: Context) : PlatformView {
override fun getView(): View {
TODO("Not yet implemented")
}
override fun dispose() {
TODO("Not yet implemented")
}
}
- getView ：返回要嵌入 Flutter 層次結(jié)構(gòu)的Android View
- dispose：釋放此View時調(diào)用，此方法調(diào)用后 View 不可用恃逻，此方法需要清除所有對象引用雏搂，否則會造成內(nèi)存泄漏藕施。
返回一個簡單的 TextView ：
class MyFlutterView(context: Context, messenger: BinaryMessenger, viewId: Int, args: Map<String, Any>?) : PlatformView {
val textView: TextView = TextView(context)
init {
textView.text = "我是Android View"
}
override fun getView(): View {
return textView
}
override fun dispose() {
TODO("Not yet implemented")
}
}
- messenger：用于消息傳遞，后面介紹 Flutter 與 原生通信時用到此參數(shù)凸郑。
- viewId：View 生成時會分配一個唯一 ID裳食。
- args：Flutter 傳遞的初始化參數(shù)。
注冊PlatformView
創(chuàng)建PlatformViewFactory：
class MyFlutterViewFactory(val messenger: BinaryMessenger) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
val flutterView = MyFlutterView(context, messenger, viewId, args as Map<String, Any>?)
return flutterView
}
}
創(chuàng)建 MyPlugin ：
class MyPlugin : FlutterPlugin {
override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
val messenger: BinaryMessenger = binding.binaryMessenger
binding
.platformViewRegistry
.registerViewFactory(
"plugins.flutter.io/custom_platform_view", MyFlutterViewFactory(messenger))
}
companion object {
@JvmStatic
fun registerWith(registrar: PluginRegistry.Registrar) {
registrar
.platformViewRegistry()
.registerViewFactory(
"plugins.flutter.io/custom_platform_view",
MyFlutterViewFactory(registrar.messenger()))
}
}
override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
}
}
記住 plugins.flutter.io/custom_platform_view 芙沥，這個字符串在 Flutter 中需要與其保持一致诲祸。
在 App 中 MainActivity 中注冊：
class MainActivity : FlutterActivity() {
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
flutterEngine.plugins.add(MyPlugin())
}
}
如果是 Flutter Plugin，沒有MainActivity而昨，則在對應(yīng)的 Plugin onAttachedToEngine 和 registerWith 方法修改如下：
public class CustomPlatformViewPlugin : FlutterPlugin,MethodCallHandler {
/// The MethodChannel that will the communication between Flutter and native Android
///
/// This local reference serves to register the plugin with the Flutter Engine and unregister it
/// when the Flutter Engine is detached from the Activity
private lateinit var channel: MethodChannel
override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
channel = MethodChannel(flutterPluginBinding.getFlutterEngine().getDartExecutor(), "custom_platform_view")
channel.setMethodCallHandler(this)
val messenger: BinaryMessenger = flutterPluginBinding.binaryMessenger
flutterPluginBinding
.platformViewRegistry
.registerViewFactory(
"plugins.flutter.io/custom_platform_view", MyFlutterViewFactory(messenger))
}
// This static function is optional and equivalent to onAttachedToEngine. It supports the old
// pre-Flutter-1.12 Android projects. You are encouraged to continue supporting
// plugin registration via this function while apps migrate to use the new Android APIs
// post-flutter-1.12 via https://flutter.dev/go/android-project-migration.
//
// It is encouraged to share logic between onAttachedToEngine and registerWith to keep
// them functionally equivalent. Only one of onAttachedToEngine or registerWith will be called
// depending on the user's project. onAttachedToEngine or registerWith must both be defined
// in the same class.
companion object {
@JvmStatic
fun registerWith(registrar: Registrar) {
val channel = MethodChannel(registrar.messenger(), "custom_platform_view")
channel.setMethodCallHandler(CustomPlatformViewPlugin())
registrar
.platformViewRegistry()
.registerViewFactory(
"plugins.flutter.io/custom_platform_view",
MyFlutterViewFactory(registrar.messenger()))
}
}
override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
if (call.method == "getPlatformVersion") {
result.success("Android ${android.os.Build.VERSION.RELEASE}")
} else {
result.notImplemented()
}
}
override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) {
channel.setMethodCallHandler(null)
}
}
嵌入Flutter
在 Flutter 中調(diào)用
class PlatformViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget platformView(){
if(defaultTargetPlatform == TargetPlatform.android){
return AndroidView(
viewType: 'plugins.flutter.io/custom_platform_view',
);
}
}
return Scaffold(
appBar: AppBar(),
body: Center(
child: platformView(),
),
);
}
}
上面嵌入的是 Android View救氯，因此通過 defaultTargetPlatform == TargetPlatform.android 判斷當前平臺加載，在 Android 上運行效果：
設(shè)置初始化參數(shù)
Flutter 端修改如下：
AndroidView(
viewType: 'plugins.flutter.io/custom_platform_view',
creationParams: {'text': 'Flutter傳給AndroidTextView的參數(shù)'},
creationParamsCodec: StandardMessageCodec(),
)
- creationParams ：傳遞的參數(shù)配紫，插件可以將此參數(shù)傳遞給 AndroidView 的構(gòu)造函數(shù)径密。
-
creationParamsCodec ：將 creationParams 編碼后再發(fā)送給平臺側(cè)，它應(yīng)該與傳遞給構(gòu)造函數(shù)的編解碼器匹配躺孝。值的范圍：
- StandardMessageCodec
- JSONMessageCodec
- StringCodec
- BinaryCodec
修改 MyFlutterView ：
class MyFlutterView(context: Context, messenger: BinaryMessenger, viewId: Int, args: Map<String, Any>?) : PlatformView {
val textView: TextView = TextView(context)
init {
args?.also {
textView.text = it["text"] as String
}
}
override fun getView(): View {
return textView
}
override fun dispose() {
TODO("Not yet implemented")
}
}
最終效果：
Flutter 向 Android View 發(fā)送消息
修改 Flutter 端，創(chuàng)建 MethodChannel 用于通信：
class PlatformViewDemo extends StatefulWidget {
@override
_PlatformViewDemoState createState() => _PlatformViewDemoState();
}
class _PlatformViewDemoState extends State<PlatformViewDemo> {
static const platform =
const MethodChannel('com.flutter.guide.MyFlutterView');
@override
Widget build(BuildContext context) {
Widget platformView() {
if (defaultTargetPlatform == TargetPlatform.android) {
return AndroidView(
viewType: 'plugins.flutter.io/custom_platform_view',
creationParams: {'text': 'Flutter傳給AndroidTextView的參數(shù)'},
creationParamsCodec: StandardMessageCodec(),
);
}
}
return Scaffold(
appBar: AppBar(),
body: Column(children: [
RaisedButton(
child: Text('傳遞參數(shù)給原生View'),
onPressed: () {
platform.invokeMethod('setText', {'name': 'laomeng', 'age': 18});
},
),
Expanded(child: platformView()),
]),
);
}
}
在 原生View 中也創(chuàng)建一個 MethodChannel 用于通信：
class MyFlutterView(context: Context, messenger: BinaryMessenger, viewId: Int, args: Map<String, Any>?) : PlatformView, MethodChannel.MethodCallHandler {
val textView: TextView = TextView(context)
private var methodChannel: MethodChannel
init {
args?.also {
textView.text = it["text"] as String
}
methodChannel = MethodChannel(messenger, "com.flutter.guide.MyFlutterView")
methodChannel.setMethodCallHandler(this)
}
override fun getView(): View {
return textView
}
override fun dispose() {
methodChannel.setMethodCallHandler(null)
}
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
if (call.method == "setText") {
val name = call.argument("name") as String?
val age = call.argument("age") as Int?
textView.text = "hello,$name,年齡：$age"
} else {
result.notImplemented()
}
}
}
Flutter 向 Android View 獲取消息
與上面發(fā)送信息不同的是底桂，F(xiàn)lutter 向原生請求數(shù)據(jù)植袍，原生返回數(shù)據(jù)到 Flutter 端，修改 MyFlutterView onMethodCall：
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
if (call.method == "setText") {
val name = call.argument("name") as String?
val age = call.argument("age") as Int?
textView.text = "hello,$name,年齡：$age"
} else if (call.method == "getData") {
val name = call.argument("name") as String?
val age = call.argument("age") as Int?
var map = mapOf("name" to "hello,$name",
"age" to "$age"
)
result.success(map)
} else {
result.notImplemented()
}
}
result.success(map) 是返回的數(shù)據(jù)籽懦。
Flutter 端接收數(shù)據(jù)：
var _data = '獲取數(shù)據(jù)';
RaisedButton(
child: Text('$_data'),
onPressed: () async {
var result = await platform
.invokeMethod('getData', {'name': 'laomeng', 'age': 18});
setState(() {
_data = '${result['name']},${result['age']}';
});
},
),
解決多個原生View通信沖突問題
當然頁面有3個原生View于个，
class PlatformViewDemo extends StatefulWidget {
@override
_PlatformViewDemoState createState() => _PlatformViewDemoState();
}
class _PlatformViewDemoState extends State<PlatformViewDemo> {
static const platform =
const MethodChannel('com.flutter.guide.MyFlutterView');
var _data = '獲取數(shù)據(jù)';
@override
Widget build(BuildContext context) {
Widget platformView() {
if (defaultTargetPlatform == TargetPlatform.android) {
return AndroidView(
viewType: 'plugins.flutter.io/custom_platform_view',
creationParams: {'text': 'Flutter傳給AndroidTextView的參數(shù)'},
creationParamsCodec: StandardMessageCodec(),
);
}
}
return Scaffold(
appBar: AppBar(),
body: Column(children: [
Row(
children: [
RaisedButton(
child: Text('傳遞參數(shù)給原生View'),
onPressed: () {
platform
.invokeMethod('setText', {'name': 'laomeng', 'age': 18});
},
),
RaisedButton(
child: Text('$_data'),
onPressed: () async {
var result = await platform
.invokeMethod('getData', {'name': 'laomeng', 'age': 18});
setState(() {
_data = '${result['name']},${result['age']}';
});
},
),
],
),
Expanded(child: Container(color: Colors.red, child: platformView())),
Expanded(child: Container(color: Colors.blue, child: platformView())),
Expanded(child: Container(color: Colors.yellow, child: platformView())),
]),
);
}
}
此時點擊 傳遞參數(shù)給原生View 按鈕哪個View會改變內(nèi)容，實際上只有最后一個會改變暮顺。
如何改變指定View的內(nèi)容厅篓？重點是 MethodChannel，只需修改上面3個通道的名稱不相同即可：
- 第一種方法：將一個唯一 id 通過初始化參數(shù)傳遞給原生 View捶码，原生 View使用這個id 構(gòu)建不同名稱的 MethodChannel羽氮。
- 第二種方法（推薦）：原生 View 生成時，系統(tǒng)會為其生成唯一id：viewId惫恼，使用 viewId 構(gòu)建不同名稱的 MethodChannel档押。
原生 View 使用 viewId 構(gòu)建不同名稱的 MethodChannel：
class MyFlutterView(context: Context, messenger: BinaryMessenger, viewId: Int, args: Map<String, Any>?) : PlatformView, MethodChannel.MethodCallHandler {
val textView: TextView = TextView(context)
private var methodChannel: MethodChannel
init {
args?.also {
textView.text = it["text"] as String
}
methodChannel = MethodChannel(messenger, "com.flutter.guide.MyFlutterView_$viewId")
methodChannel.setMethodCallHandler(this)
}
...
}
Flutter 端為每一個原生 View 創(chuàng)建不同的MethodChannel：
var platforms = [];
AndroidView(
viewType: 'plugins.flutter.io/custom_platform_view',
onPlatformViewCreated: (viewId) {
print('viewId:$viewId');
platforms
.add(MethodChannel('com.flutter.guide.MyFlutterView_$viewId'));
},
creationParams: {'text': 'Flutter傳給AndroidTextView的參數(shù)'},
creationParamsCodec: StandardMessageCodec(),
)
給第一個發(fā)送消息：
platforms[0]
.invokeMethod('setText', {'name': 'laomeng', 'age': 18});
交流
老孟Flutter博客（330個控件用法+實戰(zhàn)入門系列文章）：http://laomengit.com
