Flutter与原生IOS(swift)交互系列之一

先用Android Studio创建一个空的flutter工程作为演示

可以看到根目录下有一个名为ios的目录，这个就是ios的工程目录。

我们将它展开，发现下面有许多个文件

打开苹果电脑上的Xcode

选择ios目录下的Runner.xcworkspace打开

打开之后如下图所示，我们点击AppDelegate这个文件，这个是ios工程中注册插件的地方，我们写的所有功能的插件都需要在这里注册

可以看到首次打开右上角出现了一个红色的 No such module 'Flutter'

这时只要点击运行就行

可以看到工程正常运行没有问题，之前红色的报错也消失了

这时明明工程运行起来了，又出来了一个红色错误

Incorrect argument label in call (have 'with:', expected 'withRegistry:')

扫描二维码关注公众号，回复： 14873417 查看本文章

这个和上面那个错误一样，只要工程能正常运行，就不需要管。

现在我们可以写代码了，在刚才的AppDelegate类里写上如下的方法：


func testPlugin(messenger: FlutterBinaryMessenger) {
    let channel = FlutterMethodChannel(name: "plugin_apple", binaryMessenger: messenger)
    channel.setMethodCallHandler { (call:FlutterMethodCall, result:@escaping FlutterResult) in
    
        if (call.method == "apple_one") {
            result(["result":"success","code":200]);
        }
        
        if (call.method == "apple_two") {
            result(["result":"success","code":404]);
        }

    }
}

上面的代码里面只需关注三个地方：

第一个是："plugin_apple" 这是通道名称，需要和Flutter端定义的相同

第一个是："apple_one"和"apple_two"这是方法名称，方法可以定义多个，需要和Flutter端定义的相同

第一个是：result(...) 这是方法的返回值，可以直接返回一个字符串result("data")，也可以返回一个Map格式的返回值result(["a":1,"b":2,"c":3])

然后注册这个方法，如下所示：

 let messenger : FlutterBinaryMessenger = window?.rootViewController as! FlutterBinaryMessenger
    
testPlugin(messenger: messenger)

现在我们开始写Flutter端的调用代码

回到Android studio，在main.dart文件里面写如下方法

 Future<void> appleOne() async {
    MethodChannel _channel = const MethodChannel('plugin_apple');
    final result = await _channel.invokeMethod('apple_one');
    Map map = result as LinkedHashMap<Object?, Object?>;
    print("result: ${map["result"]}");
    print("code: ${map["code"]}");
  }

 Future<void> appleTwo() async {
    MethodChannel _channel = const MethodChannel('plugin_apple');
    final result = await _channel.invokeMethod('apple_two');
    Map map = result as LinkedHashMap<Object?, Object?>;
    print("result: ${map["result"]}");
    print("code: ${map["code"]}");
  }

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            GestureDetector(
                onTap: (){
                  appleOne();
                },
                child: const Text('调用方法 appleOne')),

            const SizedBox(height: 50),

            GestureDetector(
                onTap: (){
                  appleTwo();
                },
                child: const Text('调用方法 appleTwo')),
          ],
        ),
      ),
    );
  }

回到Xcode，点击这个黑色的三角图标启动项目

可以看到顺利的启动了项目~

依次点击两个按钮

查看控制台，可以看到顺利打印出了结果

Flutter与IOS基础交互就完成了~

关注WX公众号：大前端Pro 发送关键字 ios交互系列一获取示例代码

Flutter与原生IOS(swift)交互系列之一

猜你喜欢