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

这篇具有很好参考价值的文章主要介绍了Flutter与原生IOS(swift)交互系列之一。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

flutter swift通信,flutter,flutter,ios,Powered by 金山文档

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

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

flutter swift通信,flutter,flutter,ios,Powered by 金山文档

打开苹果电脑上的Xcode

flutter swift通信,flutter,flutter,ios,Powered by 金山文档
flutter swift通信,flutter,flutter,ios,Powered by 金山文档

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

flutter swift通信,flutter,flutter,ios,Powered by 金山文档

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

flutter swift通信,flutter,flutter,ios,Powered by 金山文档

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

这时只要点击运行就行

flutter swift通信,flutter,flutter,ios,Powered by 金山文档

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

flutter swift通信,flutter,flutter,ios,Powered by 金山文档

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

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

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

现在我们可以写代码了,在刚才的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])

然后注册这个方法,如下所示:

flutter swift通信,flutter,flutter,ios,Powered by 金山文档
 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 swift通信,flutter,flutter,ios,Powered by 金山文档

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

flutter swift通信,flutter,flutter,ios,Powered by 金山文档

依次点击两个按钮

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

flutter swift通信,flutter,flutter,ios,Powered by 金山文档

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

关注WX公众号:大前端Pro 发送关键字 ios交互系列一 获取示例代码文章来源地址https://www.toymoban.com/news/detail-787006.html

到了这里,关于Flutter与原生IOS(swift)交互系列之一的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter iOS 与 flutter 相互通信

    在混合开发中避免不了通信,简单记录一下,Flutter iOS工程与Flutter 之间相互通信。 Flutter 中通过Platform Channel实现Flutter和原生端的数据传递,是怎么进行数据通信,以及怎么配置,下面一一进行详解。 通过Platform channel 将传递的数据以发送消息的形式。 跨线程发送到iOS端和

    2024年02月13日
    浏览(33)
  • flutter和android互相调用、android原生项目与flutter module之间的交互、如何在flutter module中使用原生的方法

    bridge.dart MainActivity.kt MainActivity中 Flutter中 android项目依赖flutter module的方式网上有很多,这里就不做讲解。主要说一下这种情况下android如何与flutter module之间进行方法的调用 踩坑:期初我是想让flutter module调用它内部中的.android文件夹下的原生代码。.android文件夹下有Flutter、

    2023年04月08日
    浏览(37)
  • flutter开发实战-MethodChannel实现flutter与iOS双向通信

    flutter开发实战-MethodChannel实现flutter与iOS双向通信 最近开发中需要iOS与flutter实现通信,这里使用的MethodChannel 如果需要flutter与Android实现双向通信,请看 https://blog.csdn.net/gloryFlow/article/details/132218837 这部分与https://blog.csdn.net/gloryFlow/article/details/132218837中的一致,这里实现一下

    2024年02月13日
    浏览(36)
  • flutter开发实战-MethodChannel实现flutter与原生Android双向通信

    flutter开发实战-MethodChannel实现flutter与原生Android双向通信 最近开发中需要原生Android与flutter实现通信,这里使用的MethodChannel MethodChannel:用于传递方法调用(method invocation)。 通道的客户端和宿主端通过传递给通道构造函数的通道名称进行连接 一个应用中所使用的所有通道名称

    2024年02月13日
    浏览(27)
  • flutter使用Chanel与原生通信

    在Flutter中,Platform Channel允许Flutter与原生平台(如Android和iOS)之间进行双向通信,以便在Flutter应用程序和原生代码之间传递消息和调用功能。 以下是使用Platform Channel与原生通信的一般步骤: 1. 在Flutter端创建一个MethodChannel对象,用于发送消息给原生平台。通常在Flutter Wid

    2024年02月11日
    浏览(27)
  • uniapp生成的h5与flutter的原生进行交互

            最近拿到需求是要配合app做一些h5的页面,刚好h5又是用uniapp生成的,使用起来跟普通的h5有些区别,所以在这里总结一下使用uniapp生成的h5页面如何跟flutter进行数据的传递 这里的 kjToLessonSubmit 是flutter那边写好的方法 这里值得注意的是,我们使用uniapp去书写代码的

    2024年02月11日
    浏览(28)
  • 一统天下 flutter - 插件: flutter 使用 android 原生控件,并做数据通信

    源码 https://github.com/webabcd/flutter_demo 作者 webabcd 示例如下: libpluginplugin2.dart androidappsrcmainkotlincomexampleflutter_demoMainActivity.kt androidappsrcmainkotlincomexampleflutter_demoMyFlutterPlugin2.kt androidappsrcmainkotlincomexampleflutter_demoMyView.kt androidappsrcmainreslayoutview_my.xml 源码 http

    2024年02月03日
    浏览(37)
  • 一统天下 flutter - 插件: flutter 使用 web 原生控件,并做数据通信

    源码 https://github.com/webabcd/flutter_demo 作者 webabcd 示例如下: libpluginplugin2.dart libpluginflutter_plugin_web2_stub.dart libpluginflutter_plugin_web2.dart 源码 https://github.com/webabcd/flutter_demo 作者 webabcd

    2024年02月03日
    浏览(30)
  • 第一百三十回 Flutter与原生平台通信

    我们在上一章回中介绍了Visibility组件相关的内容,本章回中将介绍 Flutter与原生平台通信 相关的内容.闲话休提,让我们一起Talk Flutter吧。 在移动开发领域以Android和IOS SDK开发出的应用程序叫原生开发,开发同一个程序需要两个平台相关的SDK,有没有使用一个SDK来开发运行于

    2024年02月10日
    浏览(32)
  • Flutter 与 原生交互(Android),靠着这份900多页的PDF面试整理

    private static final String TAG = “FlutterPluginBasicTest”; public static String CHANNEL = “com.mmd.flutterapp/plugin”; static BasicMessageChannel messageChannel; public static void registerWith(PluginRegistry.Registrar registrar) { messageChannel = new BasicMessageChannel(registrar.messenger(),CHANNEL,StandardMessageCodec.INSTANCE); FlutterPluginBas

    2024年04月14日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包