阅读 83

Flutter(三十八)-Flutter调用原生界面

我们在使用Flutter进行项目开发的过程中,不可避免的需要使用到混合开发的场景;一般混合开发分为两种:

  • Flutter项目调用原生的功能;(推荐)

  • 原生项目嵌入Flutter页面;(不推荐)

一般我们比较推荐第一种,而在原生项目中嵌入Flutter页面的形式并不推荐,因为这样会把项目搞得比较重,我们嵌入的每一个Flutter页面,都是有一个独立的Flutter渲染引擎在里边的;

Flutter调用原生

我们以更换头像这个功能为例,来演示一下如何使用Flutter调用原生的功能;

Flutter中使用MethodChannel发送消息

Flutter中想要与原生通信,就需要使用到MethodChannel这个类,我们创建一个MethodChannelname属性赋值为mine_page/changeAvatar

image.png

我们需要通过MethodChannel给原生发消息:

image.png

Flutter中头像的点击事件里,通过_methodChannel.invokeMapMethod方法给原生发送一个changePicture的消息;

iOS中使用FlutterMethodChannel接收消息

在原生端,相应的,我们需要使用FlutterMethodChannel来接收处理消息:

image.png

  • 创建FlutterMethodChannel时,名字name要与Flutter端的MethodChannel的名字一致;

  • 使用methodChannel.setMethodCallHandler方法根据call.method的不同值,处理不同的消息

运行结果:

iShot2021-12-11 14.39.04.gif

需要注意的是,第一次进行交互时,方法执行可能会稍有延迟;

接下来,我们还需要将原生端选中的图片返回给Flutter,通过Flutter显示在界面上;

iOS给Flutter回传数据

我们将methodChannel设为全局的变量,然后在选中图片的代理回调中使用methodChannel来给Flutter回传结果:

image.png

Flutter中通过_methodChannel.setMethodCallHandler来获取原生回传的数据:

image.png

最终结果:

iShot2021-12-11 15.36.46.gif

image_picker

同样的功能,我们可以通过image_picker这个Flutter插件来实现;

首先需要在pubspec.yaml文件中添加image_picker插件:

image.png

之后执行Pub get,执行结束我们可以发现,在ios目录下会自动生成Podfile文件:

image.png

接下来,我们就可以使用image_picker更换头像了;

image_picker使用方式如下:

image.png

我们通过ImagePicker直接接收返回值,很明显返回值file不可能立即得到,所以需要使用asyncawait

接下来运行项目,我们可以看到因为添加了image_picker插件,原生项目生成了Podfile文件,所以在执行的时候,会自动执行pod install操作;

image.png

原生目录将会发生变化:

image.png

最终效果:

iShot2021-12-16 10.07.30.gif

不要忘记在iOS项目中的info.plist文件中添加权限;

image.png

image_picker的一个bug

image_picker无法选中第一张图片,目前测试,该bug真机上没有复现:

iShot2021-12-16 10.12.04.gif

在我们选中第一张图片是,控制台报出了异常,这个时候我们需要使用try_catch来进行处理:

  void _changeAvatar() async {     try {       XFile file = await ImagePicker().pickImage(source: ImageSource.gallery) as XFile;       setState(() {         _avatarFile = File(file.path);       });     } catch (e) {       print(e.toString());       setState(() {         _avatarFile = null;       });     }   }


作者:每天写点代码
链接:https://juejin.cn/post/7056255581228630029


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐