Flutter學習之旅-混合開發Part2

什么是Platform View

為了能讓一些現有的Native控件直接引用到Flutter App中，Flutter團隊提供了Platform View，允許Native View嵌入到Flutter Widget體系中，完成Dart代碼對Native View的控制。

Platform View主要包括：AndroidView和UIKitView

如何使用Platform View

AndroidView

class AndroidView extends StatefulWidget {
  
  const AndroidView({
    Key key,
    @required this.viewType,
    this.onPlatformViewCreated,
    this.hitTestBehavior = PlatformViewHitTestBehavior.opaque,
    this.layoutDirection,
    this.gestureRecognizers,
    this.creationParams,
    this.creationParamsCodec,
  }) : assert(viewType != null),
       assert(hitTestBehavior != null),
       assert(creationParams == null || creationParamsCodec != null),
       super(key: key);

  /// 嵌入Android視圖的唯一標識符
  final String viewType;
  /// Platform View創建完成的回調
  final PlatformViewCreatedCallback onPlatformViewCreated;
  /// hit測試期間的行為
  final PlatformViewHitTestBehavior hitTestBehavior;
  /// 視圖的文本方向
  final TextDirection layoutDirection;
  /// 用于處理時間沖突，對時間進行分發管理相關操作
  final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers;
  /// 傳給Android視圖的參數，在Android視圖構造的時候使用
  final dynamic creationParams;
  /// 對creationParams參數傳遞時進行的編碼規則，如果creationParams不為null，該值必須不為null
  final MessageCodec<dynamic> creationParamsCodec;

  @override
  State<AndroidView> createState() => _AndroidViewState();
}

需要注意的是：

  • AndroidView僅支持Android API 20以上
  • 在Flutter中使用AndroidView對性能的開銷比較大，應該盡量的避免使用

用Android Studio打開創建好的Flutter項目，在Android Studio頂部菜單Tools->Flutter->Open for Editing in Android Studio,


image

點擊即可打開一個Android項目，包含引入的三方庫:


image

在主項目中，創建用于嵌入Flutter中的Android View，此View繼成自PlatformView： 

class CustomFlutterView(private val context: Context, messenger: BinaryMessenger, private val viewId: Int, params: Map<String, Any>?): PlatformView,  MethodChannel.MethodCallHandler{


    private var binding: CustomFlutterViewBinding = CustomFlutterViewBinding.inflate(LayoutInflater.from(context))
    private var methodChannel: MethodChannel

    init {
        params?.also { binding.tvReceiverFlutterMsg.text = it["init"] as String }
        methodChannel = MethodChannel(messenger, "com.mufeng.flutter_native_view")
        methodChannel.setMethodCallHandler(this)
    }

    override fun getView(): View {
        binding.sendMsgToFlutter.setOnClickListener {
            methodChannel.invokeMethod("sendMsgToFlutter", mapOf("text" to "Hello, CustomFlutterView_$viewId"))
        }
        return binding.root
    }

    override fun dispose() {
        methodChannel.setMethodCallHandler(null)
        Log.e("TAG", "釋放資源")
    }

    override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
        if (call.method == "updateText") {
            val author = call.argument("author") as String?

            binding.tvReceiverFlutterMsg.text = "Hello, $author"
        } else {
            result.notImplemented()
        }
    }
}
  • getView(): 返回要嵌入Flutter層次結構的Android View
  • dispose: 釋放此VIew時調用，此方法調用后View不可用，此方法需要清除所有對象引用，否則會造成內存泄漏
  • messenger：用于消息傳遞，Flutter與原生通信時會用到此參數
  • viewId： View生成時會分配一個唯一ID
  • args：Flutter傳遞的初始化參數
注冊PlatformView

創建一個PlatformViewFactory：

class CustomFlutterViewFactory(private val messenger: BinaryMessenger):  PlatformViewFactory(StandardMessageCodec.INSTANCE){
    override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
        return CustomFlutterView(context, messenger, viewId, args as Map<String, Any>)
    }
}

創建CustomPlugin：

class CustomPlugin : FlutterPlugin {

    companion object {

        const val VIEW_TYPE_ID: String = "com.mufeng.flutter_native_view/custom_platform_view"

        fun registerWith(registrar: PluginRegistry.Registrar) {
            registrar.platformViewRegistry()
                    .registerViewFactory(VIEW_TYPE_ID, CustomFlutterViewFactory(registrar.messenger()))
        }
    }

    override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        val messenger: BinaryMessenger = binding.binaryMessenger
        binding.platformViewRegistry.registerViewFactory(VIEW_TYPE_ID, CustomFlutterViewFactory(messenger))
    }

    override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {

    }
}

注意：VIEW_TYPE_ID 這個字符串需要和Flutter端保持一致

在App中MainActivity中注冊：

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        flutterEngine.plugins.add(CustomPlugin())
    }
}

需要注意的是，如果我們是在開發Flutter Plugin時，是沒有MainActivity的，則需要在對應的Plugin類下的onAttachedToEngine() 方法和registerWith()方法下修改

在Flutter中調用

class _MyHomePageState extends State<MyHomePage> {


  static const platform =
  const MethodChannel('com.mufeng.flutter_native_view');

  String result;

  @override
  void initState() {
    super.initState();
    platform.setMethodCallHandler((call) {
      setState(() {
        result = call.arguments['text'];
      });
      print("接收到Native傳遞的數據: ${call.arguments['text']}");
      return;
    });
  }


  @override
  Widget build(BuildContext context) {
    Widget platformView() {
      if (defaultTargetPlatform == TargetPlatform.android) {
        return AndroidView(
          viewType: "com.mufeng.flutter_native_view/custom_platform_view",
          creationParams: {'init': '來自Flutter傳遞的初始化參數'},
          creationParamsCodec: StandardMessageCodec(),
          onPlatformViewCreated: (viewId) {
            print('View 創建完成; ViewId: $viewId');
          },
        );
      }
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Platform View',
          style: TextStyle(
              color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
      ),
      body: Column(
        children: [
          TextButton(onPressed: () {
            platform.invokeMethod('updateText', {'author': 'MuFeng'});
          }, child: Text('傳遞參數給原生View')),
          Text(result??'等待Native發送的數據'),
          Expanded(child: platformView()),
        ],
      ),
    );
  }
}

查看在Android中的運行效果：


image

image

image

UIKitView

class UiKitView extends StatefulWidget {
  
  const UiKitView({
    Key key,
    @required this.viewType,
    this.onPlatformViewCreated,
    this.hitTestBehavior = PlatformViewHitTestBehavior.opaque,
    this.layoutDirection,
    this.creationParams,
    this.creationParamsCodec,
    this.gestureRecognizers,
  }) : assert(viewType != null),
       assert(hitTestBehavior != null),
       assert(creationParams == null || creationParamsCodec != null),
       super(key: key);
  /// 嵌入iOS視圖的唯一標識符
  final String viewType;
  /// Platform View創建完成的回調
  final PlatformViewCreatedCallback onPlatformViewCreated;
  /// hit測試期間的行為
  final PlatformViewHitTestBehavior hitTestBehavior;
  /// 視圖的文本方向
  final TextDirection layoutDirection;
  /// 傳給iOS視圖的參數，在Android視圖構造的時候使用
  final dynamic creationParams;
  /// 對creationParams參數傳遞時進行的編碼規則，如果creationParams不為null，該值必須不為null
  final MessageCodec<dynamic> creationParamsCodec;
  /// 用于處理時間沖突，對時間進行分發管理相關操作
  final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers;

  @override
  State<UiKitView> createState() => _UiKitViewState();
}

需要使用Xcode進行開發，用Android Studio打開創建好的Flutter項目，在Android Studio頂部菜單Tools->Flutter->Open iOS module in Xcode,點擊即可打開一個iOS項目

第一步，在Runner目錄下創建iOS View，此View繼承FlutterPlatformView


import Foundation
import Flutter

class CustomFlutterView:NSObject,  FlutterPlatformView {
    
    let label = UILabel()
    
    init(_ frame: CGRect, viewID: Int64, params: Any?, messenger: FlutterBinaryMessenger) {
        super.init()
        if(params is NSDictionary){
            let dict = params as! NSDictionary
            label.text = "\(dict.value(forKey: "init") as? String ?? "")點擊發送數據給Flutter"
        }
        
        let methodChannel = FlutterMethodChannel(name: "com.mufeng.flutter_native_view", binaryMessenger: messenger)
        methodChannel.setMethodCallHandler {(call, result) in
            if(call.method == "updateText"){
                if let dict = call.arguments as? Dictionary<String, Any>{
                    let author: String = dict["author"] as? String ?? ""
                    self.label.text = "Hello, \(author), 點擊發送數據給Flutter"
                }
            }
        }
        
        label.addOnClick{ (view) in
            var arguments = Dictionary<String, Any>()
            arguments["text"] = "CustomFlutterView_\(viewID)"
            methodChannel.invokeMethod("sendMsgToFlutter", arguments: arguments)
        }
    }
    
    func view() -> UIView {
        return label
    }
    
}

第二步，創建CustomFlutterViewFactory：


import Foundation
import Flutter

class CustomFlutterViewFactory: NSObject, FlutterPlatformViewFactory {
    var messenger: FlutterBinaryMessenger
    
    init(messenger: FlutterBinaryMessenger) {
        self.messenger = messenger
        super.init()
    }
    
    func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments params: Any?) -> FlutterPlatformView{
        return CustomFlutterView(frame, viewID: viewId, params: params, messenger: messenger)
    }
    
    func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
            return FlutterStandardMessageCodec.sharedInstance()
        }
}

第三步，在AppDelegate中注冊：

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    
  let VIEW_TYPE_ID: String = "com.mufeng.flutter_native_view/custom_platform_view"
    
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    
    let registrar: FlutterPluginRegistrar = self.registrar(forPlugin: VIEW_TYPE_ID)!
    let factory = CustomFlutterViewFactory(messenger: registrar.messenger())
    registrar.register(factory, withId: VIEW_TYPE_ID)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

注意：VIEW_TYPE_ID 這個字符串需要和Flutter端保持一致

第四步，在Flutter中調用


class _MyHomePageState extends State<MyHomePage> {


  static const platform =
  const MethodChannel('com.mufeng.flutter_native_view');

  String result;

  @override
  void initState() {
    super.initState();
    platform.setMethodCallHandler((call) {
      setState(() {
        result = call.arguments['text'];
      });
      print("接收到Native傳遞的數據: ${call.arguments['text']}");
      return;
    });
  }


  @override
  Widget build(BuildContext context) {
    Widget platformView() {
      if (defaultTargetPlatform == TargetPlatform.android) {
        return AndroidView(
          viewType: "com.mufeng.flutter_native_view/custom_platform_view",
          creationParams: {'init': '來自Flutter傳遞的初始化參數'},
          creationParamsCodec: StandardMessageCodec(),
          onPlatformViewCreated: (viewId) {
            print('View 創建完成; ViewId: $viewId');
          },
        );
      }else if(defaultTargetPlatform == TargetPlatform.android){
        return UiKitView(
          viewType: "com.mufeng.flutter_native_view/custom_platform_view",
          creationParams: {'init': '來自Flutter傳遞的初始化參數'},
          creationParamsCodec: StandardMessageCodec(),
          onPlatformViewCreated: (viewId) {
            print('View 創建完成; ViewId: $viewId');
          },
        );
      }else{
        return Text('暫不支持的平臺類型');
      }
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Platform View',
          style: TextStyle(
              color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
      ),
      body: Column(
        children: [
          TextButton(onPressed: () {
            platform.invokeMethod('updateText', {'author': 'MuFeng'});
          }, child: Text('傳遞參數給原生View')),
          Text(result??'等待Native發送的數據'),
          Expanded(child: platformView()),
        ],
      ),
    );
  }
}

查看在iOS中的運行效果：


image

image

image

本文代碼地址

https://github.com/hanlin19900610/flutter-action/tree/main/flutter-native/flutter_native_view

以上只是Platform View的簡單的使用，更加詳細的使用，請參考一下資料：
嵌入原生View-Android
嵌入原生View-IOS
在Flutter中嵌入Native組件的正確姿勢
萬萬沒想到——Flutter外接紋理

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容