Flutter 混合开发系列 蕴含如下：
- 嵌入原生View-Android
- 嵌入原生View-iOS
- 与原生通信-MethodChannel
- 与原生通信-BasicMessageChannel
- 与原生通信-EventChannel
- 增加 Flutter 到 Android Activity
- 增加 Flutter 到 Android Fragment
- 增加 Flutter 到 iOS
每个工作日分享一篇，欢送关注、点赞及转发。
iOS View
倡议应用 Xcode 进行开发，在 Android Studio 左侧 project tab下选中 ios 目录下任意一个文件，右上角会呈现 Open iOS module in Xcode ，
点击即可关上，关上后如下：
在Runner 目录下创立 iOS View，此 View 继承 FlutterPlatformView ，返回一个简略的 UILabel ：
import Foundationimport Flutterclass MyFlutterView: NSObject,FlutterPlatformView { let label = UILabel() init(_ frame: CGRect,viewID: Int64,args :Any?,messenger :FlutterBinaryMessenger) { label.text = "我是 iOS View" } func view() -> UIView { return label } }- getView ：返回iOS View
注册PlatformView
创立 MyFlutterViewFactory：
import Foundationimport Flutterclass MyFlutterViewFactory: NSObject,FlutterPlatformViewFactory { var messenger:FlutterBinaryMessenger init(messenger:FlutterBinaryMessenger) { self.messenger = messenger super.init() } func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView { return MyFlutterView(frame,viewID: viewId,args: args,messenger: messenger) } func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol { return FlutterStandardMessageCodec.sharedInstance() }}在 AppDelegate 中注册：
import UIKitimport Flutter@UIApplicationMain@objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { GeneratedPluginRegistrant.register(with: self) let registrar:FlutterPluginRegistrar = self.registrar(forPlugin: "plugins.flutter.io/custom_platform_view_plugin")! let factory = MyFlutterViewFactory(messenger: registrar.messenger()) registrar.register(factory, withId: "plugins.flutter.io/custom_platform_view") return super.application(application, didFinishLaunchingWithOptions: launchOptions) }}记住 plugins.flutter.io/custom_platform_view ，这个字符串在 Flutter 中须要与其保持一致。
嵌入Flutter
在 Flutter 中调用
class PlatformViewDemo extends StatelessWidget { @override Widget build(BuildContext context) { Widget platformView() { if (defaultTargetPlatform == TargetPlatform.android) { return 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的参数'}, creationParamsCodec: StandardMessageCodec(), ); }else if(defaultTargetPlatform == TargetPlatform.iOS){ return UiKitView( viewType: 'plugins.flutter.io/custom_platform_view', ); } } return Scaffold( appBar: AppBar(), body: Center( child: platformView(), ), ); }}下面嵌入的是 iOS View，因而通过 defaultTargetPlatform == TargetPlatform.iOS 判断以后平台加载，在 iOS 上运行成果：
设置初始化参数
Flutter 端批改如下：
UiKitView( viewType: 'plugins.flutter.io/custom_platform_view', creationParams: {'text': 'Flutter传给IOSTextView的参数'}, creationParamsCodec: StandardMessageCodec(), )- creationParams ：传递的参数，插件能够将此参数传递给 AndroidView 的构造函数。
creationParamsCodec ：将 creationParams 编码后再发送给平台侧，它应该与传递给构造函数的编解码器匹配。值的范畴：
- StandardMessageCodec
- JSONMessageCodec
- StringCodec
- BinaryCodec
批改 MyFlutterView ：
import Foundationimport Flutterclass MyFlutterView: NSObject,FlutterPlatformView { let label = UILabel() init(_ frame: CGRect,viewID: Int64,args :Any?,messenger :FlutterBinaryMessenger) { super.init() if(args is NSDictionary){ let dict = args as! NSDictionary label.text = dict.value(forKey: "text") as! String } } func view() -> UIView { return label } }最终成果：
Flutter 向 iOS View 发送音讯
批改 Flutter 端，创立 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的参数'}, creationParamsCodec: StandardMessageCodec(), ); } else if (defaultTargetPlatform == TargetPlatform.iOS) { return UiKitView( viewType: 'plugins.flutter.io/custom_platform_view', creationParams: {'text': 'Flutter传给IOSTextView的参数'}, creationParamsCodec: StandardMessageCodec(), ); } } return Scaffold( appBar: AppBar(), body: Column(children: [ RaisedButton( child: Text('传递参数给原生View'), onPressed: () { platform.invokeMethod('setText', {'name': 'laomeng', 'age': 18}); }, ), Expanded(child: platformView()), ]), ); }}在 原生View 中也创立一个 MethodChannel 用于通信：
import Foundationimport Flutterclass MyFlutterView: NSObject,FlutterPlatformView { let label = UILabel() init(_ frame: CGRect,viewID: Int64,args :Any?,messenger :FlutterBinaryMessenger) { super.init() if(args is NSDictionary){ let dict = args as! NSDictionary label.text = dict.value(forKey: "text") as! String } let methodChannel = FlutterMethodChannel(name: "com.flutter.guide.MyFlutterView", binaryMessenger: messenger) methodChannel.setMethodCallHandler { (call, result) in if (call.method == "setText") { if let dict = call.arguments as? Dictionary<String, Any> { let name:String = dict["name"] as? String ?? "" let age:Int = dict["age"] as? Int ?? -1 self.label.text = "hello,\(name),年龄：\(age)" } } } } func view() -> UIView { return label } }Flutter 向 Android View 获取音讯
与下面发送信息不同的是，Flutter 向原生申请数据，原生返回数据到 Flutter 端，批改 MyFlutterView onMethodCall：
import Foundationimport Flutterclass MyFlutterView: NSObject,FlutterPlatformView { let label = UILabel() init(_ frame: CGRect,viewID: Int64,args :Any?,messenger :FlutterBinaryMessenger) { super.init() if(args is NSDictionary){ let dict = args as! NSDictionary label.text = dict.value(forKey: "text") as! String } let methodChannel = FlutterMethodChannel(name: "com.flutter.guide.MyFlutterView", binaryMessenger: messenger) methodChannel.setMethodCallHandler { (call, result:FlutterResult) in if (call.method == "setText") { if let dict = call.arguments as? Dictionary<String, Any> { let name:String = dict["name"] as? String ?? "" let age:Int = dict["age"] as? Int ?? -1 self.label.text = "hello,\(name),年龄：\(age)" } }else if (call.method == "getData") { if let dict = call.arguments as? Dictionary<String, Any> { let name:String = dict["name"] as? String ?? "" let age:Int = dict["age"] as? Int ?? -1 result(["name":name,"age":age]) } } } } func view() -> UIView { return label } }result() 是返回的数据。
Flutter 端接收数据：
var _data = '获取数据';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 = '获取数据'; @override Widget build(BuildContext context) { Widget platformView() { if (defaultTargetPlatform == TargetPlatform.android) { return AndroidView( viewType: 'plugins.flutter.io/custom_platform_view', creationParams: {'text': 'Flutter传给AndroidTextView的参数'}, creationParamsCodec: StandardMessageCodec(), ); } else if (defaultTargetPlatform == TargetPlatform.iOS) { return UiKitView( viewType: 'plugins.flutter.io/custom_platform_view', creationParams: {'text': 'Flutter传给IOSTextView的参数'}, creationParamsCodec: StandardMessageCodec(), ); } } return Scaffold( appBar: AppBar(), body: Column(children: [ Row( children: [ RaisedButton( child: Text('传递参数给原生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())), ]), ); }}此时点击 传递参数给原生View 按钮哪个View会扭转内容，实际上只有最初一个会扭转。
如何扭转指定View的内容？重点是 MethodChannel，只需批改下面3个通道的名称不雷同即可：
- 第一种办法：将一个惟一 id 通过初始化参数传递给原生 View，原生 View应用这个id 构建不同名称的 MethodChannel。
- 第二种办法（举荐）：原生 View 生成时，零碎会为其生成惟一id：viewId，应用 viewId 构建不同名称的 MethodChannel。
原生 View 应用 viewId 构建不同名称的 MethodChannel：
import Foundationimport Flutterclass MyFlutterView: NSObject,FlutterPlatformView { let label = UILabel() init(_ frame: CGRect,viewID: Int64,args :Any?,messenger :FlutterBinaryMessenger) { super.init() if(args is NSDictionary){ let dict = args as! NSDictionary label.text = dict.value(forKey: "text") as! String } let methodChannel = FlutterMethodChannel(name: "com.flutter.guide.MyFlutterView_\(viewID)", binaryMessenger: messenger) methodChannel.setMethodCallHandler { (call, result:FlutterResult) in ... } } func view() -> UIView { return label } }Flutter 端为每一个原生 View 创立不同的MethodChannel：
var platforms = [];UiKitView( viewType: 'plugins.flutter.io/custom_platform_view', onPlatformViewCreated: (viewId) { print('viewId:$viewId'); platforms .add(MethodChannel('com.flutter.guide.MyFlutterView_$viewId')); }, creationParams: {'text': 'Flutter传给AndroidTextView的参数'}, creationParamsCodec: StandardMessageCodec(),)给第一个发送音讯：
platforms[0] .invokeMethod('setText', {'name': 'laomeng', 'age': 18});交换
老孟Flutter博客（330个控件用法+实战入门系列文章）：http://laomengit.com
欢送退出Flutter交换群（微信：laomengit）、关注公众号【老孟Flutter】：