乐趣区

关于flutter:Flutter-混合开发嵌入原生ViewiOS

jiezi

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 Foundation
import Flutter

class 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 Foundation
import Flutter

class 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 UIKit
import 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 Foundation
import Flutter

class 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 Foundation
import Flutter

class 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 Foundation
import Flutter

class 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 Foundation
import Flutter

class 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】：
退出移动版