一統(tǒng)天下 flutter - 插件: flutter 使用 ios 原生控件，并做數(shù)據(jù)通信

這篇具有很好參考價值的文章主要介紹了一統(tǒng)天下 flutter - 插件: flutter 使用 ios 原生控件，并做數(shù)據(jù)通信。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd

一統(tǒng)天下 flutter - 插件: flutter 使用 ios 原生控件，并做數(shù)據(jù)通信

示例如下:

lib\plugin\plugin2.dart

/*
 * 插件
 * 本例用于演示 flutter 使用 android/ios 原生控件，并做數(shù)據(jù)通信
 *
 * 一、android 插件開發(fā)
 * 1、主 flutter 項目要先在 android 平臺中運行一下
 * 2、在 android 文件夾上，使用右鍵菜單，然后選擇 Flutter -> Open Android module in Android Studio 即可開發(fā)插件
 * 3、參見 /android/app/src/main/kotlin/com/example/flutter_demo/MainActivity.kt
 *
 * 二、ios 插件開發(fā)
 * 1、主 flutter 項目要先在 ios 平臺中運行一下
 * 2、在 android studio 或 visual studio code 中執(zhí)行如下邏輯
 *    cd ios
 *    pod install
 * 3、用 xcode 中打開 /ios/Runner.xcworkspace 即可開發(fā)插件
 * 4、參見 /ios/Runner/AppDelegate.swift
 *
 *
 * 注：插件中實現(xiàn)的功能不支持 flutter 的 hot reload
 */

import 'dart:async';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../helper.dart';

class Plugin2Demo extends StatefulWidget {
  const Plugin2Demo({Key? key}) : super(key: key);

  @override
  _Plugin2DemoState createState() => _Plugin2DemoState();
}

class _Plugin2DemoState extends State<Plugin2Demo> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('title'),
      ),
      body: const _MyWidget()
    );
  }
}


class _MyWidget extends StatefulWidget {
  const _MyWidget({Key? key}) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<_MyWidget> {

  /// 用于保存從 android/ios 發(fā)送到 flutter 的數(shù)據(jù)
  String _nativeToFlutterMessage = '';
  /// 用于控制 android/ios 和 flutter 通信的 controller
  final _controller = _MyViewController();

  @override
  void initState() {

    _controller.addListener(() {
      setState(() {
        _nativeToFlutterMessage = _controller.nativeToFlutterMessage;
      });
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: Container(
            color: Colors.red,
            child: _buildNativeView(),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.green,
            child: _buildFlutterView(),
          ),
        ),
      ],
    );
  }

  /// 嵌入到 flutter 中的 android/ios 的 view
  Widget _buildNativeView() {
    return _MyNativeView(
      controller: _controller,
    );
  }

  Widget _buildFlutterView() {
    return Stack(
      alignment: AlignmentDirectional.bottomCenter,
      children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("native to flutter: $_nativeToFlutterMessage"),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                _controller.flutterToNative("${DateTime.now().millisecondsSinceEpoch}");
              },
              child: const Text('發(fā)送數(shù)據(jù)給 Native'),
            ),
          ],
        ),
        const Padding(
          padding: EdgeInsets.only(bottom: 15),
          child: Text(
            'Flutter - View',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }
}


/// 嵌入到 flutter 中的 android/ios 的 view
class _MyNativeView extends StatefulWidget {
  final _MyViewController controller;

  const _MyNativeView({required this.controller, Key? key}) : super(key: key);

  @override
  _MyNativeViewState createState() => _MyNativeViewState();
}

class _MyNativeViewState extends State<_MyNativeView> {

  @override
  Widget build(BuildContext context) {

    /// 判斷是否為 web 環(huán)境要用 kIsWeb
    /// 如果在 web 環(huán)境使用 Platform.xxx 的話會報錯的
    if (kIsWeb) {
      return const MyText("不支持 web 環(huán)境");
    }

    if (Platform.isAndroid) {
      /// 嵌入到 flutter 中的 android 的 view（相關(guān)的插件在 android/app/src/main/kotlin/com/example/flutter_demo/MyFlutterPlugin2.kt）
      return AndroidView(
        viewType: 'com.webabcd.flutter/myview',                           /// 需要嵌入的 view 的標識（這是在插件中定義的）
        onPlatformViewCreated: _onPlatformViewCreated,                    /// 傳給插件的初始參數(shù)
        creationParams: const <String, dynamic>{'k1': 'p1', 'k2': 'p2'},  /// 傳給插件的初始參數(shù)的編碼方式
        creationParamsCodec: const StandardMessageCodec(),                /// 需要嵌入的 view 創(chuàng)建后觸發(fā)的事件
      );
    }

    if (Platform.isIOS) {
      /// 嵌入到 flutter 中的 ios 的 view（相關(guān)的插件在 ios/Runner/MyFlutterPlugin2.swift）
      return UiKitView(
        viewType: 'com.webabcd.flutter/myview',                           /// 需要嵌入的 view 的標識（這是在插件中定義的）
        creationParams: const <String, dynamic>{'k1': 'p1', 'k2': 'p2'},  /// 傳給插件的初始參數(shù)
        creationParamsCodec: const StandardMessageCodec(),                /// 傳給插件的初始參數(shù)的編碼方式
        onPlatformViewCreated: _onPlatformViewCreated,                    /// 需要嵌入的 view 創(chuàng)建后觸發(fā)的事件
      );
    }

    return const MyText("不支持當前環(huán)境");
  }

  /// 對于 android 來說，這個 id 是插件中 PlatformViewFactory 的 create() 中生成的 viewId
  /// 對于 ios 來說，這個 id 是插件中 FlutterPlatformViewFactory 的 create() 中生成的 viewId
  void _onPlatformViewCreated(int id) {
    var methodChannel = MethodChannel('com.webabcd.flutter/channel2_view$id');
    widget.controller.setMethodChannel(methodChannel);
  }
}

/// 用于控制 android/ios 和 flutter 通信的 controller
class _MyViewController extends ChangeNotifier {

  late MethodChannel _methodChannel;

  String nativeToFlutterMessage = "";

  /// 接收從 android/ios 發(fā)送到 flutter 的數(shù)據(jù)
  void setMethodChannel(MethodChannel methodChannel) {
    _methodChannel = methodChannel;
    _methodChannel.setMethodCallHandler((call) async {
      switch (call.method) {
        case 'nativeToFlutter':
          final result = call.arguments as String;
          nativeToFlutterMessage = result;
          notifyListeners();
          break;
      }
    });
  }

  /// 從 flutter 發(fā)送數(shù)據(jù)到 android/ios
  Future<void> flutterToNative(String message) async {
    await _methodChannel.invokeMethod('flutterToNative', message);
  }
}

ios\Runner\AppDelegate.swift

/*
 * 本例用于演示 ios 插件的開發(fā)
 */

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate
{
    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:[UIApplication.LaunchOptionsKey: Any]?) -> Bool
    {
        // 用于為某個插件提供服務(wù)
        let registrar1: FlutterPluginRegistrar = self.registrar(forPlugin: "com.webabcd.flutter/plugin1")!
        let registrar2: FlutterPluginRegistrar = self.registrar(forPlugin: "com.webabcd.flutter/plugin2")!
        
        // 注冊自定義插件，用于演示 flutter 與 ios 原生之間的數(shù)據(jù)通信
        MyFlutterPlugin1.register(with: registrar1)
        
        // 注冊自定義插件，用于演示 flutter 使用 ios 原生控件，并做數(shù)據(jù)通信
        MyFlutterPlugin2.register(with: registrar2)
        
        GeneratedPluginRegistrant.register(with: self)
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

ios\Runner\MyFlutterPlugin2.swift

/*
 * 自定義插件，用于演示 flutter 使用 ios 原生控件，并做數(shù)據(jù)通信
 */

import UIKit
import Flutter

// 自定義插件
class MyFlutterPlugin2: NSObject, FlutterPlugin
{
    static func register(with registrar: FlutterPluginRegistrar)
    {
        let binaryMessenger = registrar.messenger() // binaryMessenger 用于后續(xù)通過 FlutterMethodChannel 傳輸二進制數(shù)據(jù)
        
        let factory = MyFlutterPlatformViewFactory(binaryMessenger: binaryMessenger)
        registrar.register(factory, withId: "com.webabcd.flutter/myview") // 指定 view 的標識，在 flutter 中通過此標識使用這個 view
    }
}

// 自定義 FlutterPlatformViewFactory 用于創(chuàng)建一個 FlutterPlatformView
class MyFlutterPlatformViewFactory: NSObject,FlutterPlatformViewFactory {
    
    var binaryMessenger: FlutterBinaryMessenger?
    
    init(binaryMessenger: FlutterBinaryMessenger)
    {
        super.init()
        
        self.binaryMessenger = binaryMessenger
    }
    
    // viewId - 創(chuàng)建的 view 實例的 id（當這個 view 創(chuàng)建成功后，回調(diào) UiKitView 的 onPlatformViewCreated 時，會把這個 viewId 傳遞過去）
    // args - 在 flutter 中通過 UiKitView 的 creationParams 傳遞過來的初始參數(shù)
    func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView
    {
        return MyFlutterPlatformView(frame, viewId: viewId, args: args, binaryMessenger: self.binaryMessenger!)
    }
    
    // 初始參數(shù)的編碼方式，要與 UiKitView 的 creationParamsCodec 一致
    func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol
    {
        return FlutterStandardMessageCodec.sharedInstance()
    }
}

// 自定義 FlutterPlatformView 用于將指定的 ios 中的 view 嵌入到 flutter 中
class MyFlutterPlatformView: NSObject, FlutterPlatformView {
    
    // 需要嵌入到 flutter 中的 ios 的 view
    var _myView: MyView?
    // 用于 flutter 與 ios 之間的通信
    var _methodChannel: FlutterMethodChannel?
    
    init(_ frame: CGRect, viewId: Int64, args :Any?, binaryMessenger: FlutterBinaryMessenger)
    {
        super.init()
        
        _myView = MyView()
        _myView!.frame = frame
        
        // 獲取在 flutter 中通過 UiKitView 的 creationParams 傳遞過來的初始參數(shù)
        if let dict = args as? NSDictionary
        {
            _myView!.showMessage(message: "flutter 創(chuàng)建 UiKitView 時的初始參數(shù) k1:\(dict.value(forKey: "k1") as! String), k2:\(dict.value(forKey: "k2") as! String)")
        }

        // 創(chuàng)建一個 FlutterMethodChannel 并指定其名稱，它用于 flutter 和 ios 插件之間的通信（在 flutter 中通過名稱獲取此 channel 后就可以通信了）
        // binaryMessenger 的意思是這個 FlutterMethodChannel 用于傳輸二進制數(shù)據(jù)
        _methodChannel = FlutterMethodChannel(name: "com.webabcd.flutter/channel2_view\(viewId)", binaryMessenger: binaryMessenger)
        // flutter 調(diào)用 ios 插件中的方法時，會執(zhí)行到這里（更詳細的說明請參見 MyFlutterPlugin1.swift）
        _methodChannel!.setMethodCallHandler { (call:FlutterMethodCall, result:@escaping FlutterResult) in
          
            let method = call.method
            
            if (method == "flutterToNative")
            {
                let message = call.arguments as! String
                self._myView!.showMessage(message: "flutter to ios: \(message)")
                result(true)
            }
        }
        
        _myView!.setIosToFlutterHandler { message in
            // 通過 FlutterMethodChannel 從 ios 發(fā)送數(shù)據(jù)到 flutter
            self._methodChannel!.invokeMethod("nativeToFlutter", arguments: message)
        }
    }
    
    // 返回需要嵌入到 flutter 中的 ios 的 view
    func view() -> UIView {
        return _myView!
    }
}

ios\Runner\MyView.swift

/*
 * 本例的 view 用于顯示在 flutter 中
 */

import Foundation

class MyView : UIView
{
    var textViewBottom = UITextView()
    var textView = UITextView()
    var button = UIButton(type: .custom)
    
    required init?(coder: NSCoder)
    {
        super.init(coder:coder);
    }

    override init(frame: CGRect)
    {
        super.init(frame: frame);
        
        self.textView.font = UIFont.systemFont(ofSize: 14)
        self.textView.textColor = .black
        self.textView.backgroundColor = .clear
        self.textView.textAlignment = .center
        self.textView.isEditable = false
        self.addSubview(self.textView)
        
        self.button.setTitle("發(fā)送數(shù)據(jù)給 flutter", for: .normal)
        self.button.backgroundColor = .blue
        self.button.layer.cornerRadius = 10
        self.button.titleLabel?.font = UIFont.systemFont(ofSize: 14)
        self.button.titleLabel?.textColor = .white
        self.button.addTarget(self, action: #selector(buttonPressed), for: .touchUpInside)
        self.addSubview(self.button)
        
        self.textViewBottom.font = UIFont.boldSystemFont(ofSize: 24)
        self.textViewBottom.textColor = .black
        self.textViewBottom.backgroundColor = .clear
        self.textViewBottom.textAlignment = .center
        self.textViewBottom.isEditable = false
        self.textViewBottom.text = "iOS - View"
        self.addSubview(self.textViewBottom)
    }
    
    override func layoutSubviews()
    {
        super.layoutSubviews()
        
        self.button.frame = CGRect(x: (self.bounds.width - 200) / 2, y: self.bounds.height / 2, width: 200, height: 30)
        self.textView.frame = CGRect(x: 0, y: self.bounds.height / 4, width: self.bounds.width, height: 30)
        self.textViewBottom.frame = CGRect(x: 0, y: self.bounds.height - 60, width: self.bounds.width, height: 40)
    }
    
    // 用于顯示 flutter 發(fā)送到 ios 的數(shù)據(jù)
    func showMessage(message: String)
    {
        self.textView.text = message
    }
    
    @objc func buttonPressed()
    {
        // 用于從 ios 發(fā)送數(shù)據(jù)到 flutter
        self.iosToFlutter("\(Int(Date().timeIntervalSince1970 * 1000))")
    }
    
    private var iosToFlutter:(_ message: String) -> () = { p in }
    func setIosToFlutterHandler(iosToFlutter: @escaping ((_ message: String) -> ()))
    {
        self.iosToFlutter = iosToFlutter
    }
}

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd文章來源地址http://www.zghlxwxcb.cn/news/detail-438681.html

到了這里，關(guān)于一統(tǒng)天下 flutter - 插件: flutter 使用 ios 原生控件，并做數(shù)據(jù)通信的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！