Flutter开发之——IOSView

发表于 分类于 ， ， 阅读时长 ≈ 6 分钟

一 概述

  • Xcode开发环境介绍
  • Intellij创建Flutter应用
  • Flutter中嵌入IOS自定义View
  • Flutter中嵌入IOS自定义View时设置初始化参数

二 Xcode开发环境介绍

  • Xcode：12.5.1
  • CocoaPod：1.10.1(pod --version)
  • Flutter：2.2.3
  • Dart：2.13.4
  • Intellij：Community 2021.1

三 Intellij创建Flutter应用

  • 依次点击：File——>New——>Project——>Flutter项目
  • 设置项目名称及存储位置，开发语言及适用平台
  • 创建完成后的项目结构如图所示

三 Flutter中嵌入IOS自定义View

3.1 将项目使用Xcode打开

  • 在项目上右键，Flutter——>Open IOS module in Xcode
  • 打开后的项目目录结构如图所示

3.2 创建IOS自定义View(MyFlutterView)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
    }   
}

3.3 MyFlutterViewFactory

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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()
    }
}

3.4 在 AppDelegate 中注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 中需要与其保持一致

3.5 编辑Flutter页面

在Intellij页面中编辑main.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(PlatformViewDemo());
}
class PlatformViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget? platformView() {
      if (defaultTargetPlatform == TargetPlatform.android) {
        return AndroidView(
          viewType: 'plugins.flutter.io/custom_platform_view',
        );
      } else if (defaultTargetPlatform == TargetPlatform.iOS) {
        return UiKitView(
          viewType: 'plugins.flutter.io/custom_platform_view',
        );
      }
    }
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Platform"),
        ),
        body: Center(
          child: platformView(),
        ),
      ),
    );
  }
}

3.6 效果图

四 Flutter中嵌入IOS自定义View时设置初始化参数

4.1 Flutter 端修改如下

1
2
3
4
5
UiKitView(
          viewType: 'plugins.flutter.io/custom_platform_view',
          creationParams: {'text': 'Flutter传给IOSTextView的参数'},
          creationParamsCodec: StandardMessageCodec(),
        )
  • creationParams ：传递的参数，插件可以将此参数传递给 AndroidView 的构造函数。
  • creationParamsCodec ：将 creationParams 编码后再发送给平台侧，它应该与传递给构造函数的编解码器匹配。值的范围
    • StandardMessageCodec
    • JSONMessageCodec
    • StringCodec
    • BinaryCodec

4.2 IOS自定义View接受参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
    }   
}

4.3 效果图

五 Flutter 向 iOS View 发送消息

5.1 Flutter 端，创建 MethodChannel 用于通信(Intellij端修改)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(PlatformViewDemo());
}

class PlatformViewDemo extends StatefulWidget {
  @override
  _PlatformViewDemoState createState() => _PlatformViewDemoState();
}

class _PlatformViewDemoState extends State<PlatformViewDemo> {
  static const platform =
  const MethodChannel('com.example.flutterios.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 MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Column(children: [
          RaisedButton(
            child: Text('传递参数给原生View'),
            onPressed: () {
              platform.invokeMethod('setText', {'name': '张三', 'age': 18});
            },
          ),
          Expanded(child: Center(child: platformView())),
        ]),
      ),
    );
  }
}

说明：

  • com.example.flutterios.MyFlutterView：是IOS端端自定义View路径，与IOS端MethodChannel端保持一致

5.2 IOS原生View 中也创建一个 MethodChannel 用于通信(Xcode)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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.example.flutterios.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
    }
}

5.3 效果图