「这是我参与2022初次更文应战的第6天,活动详情查看:2022初次更文应战」

咱们在运用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;
      });
    }
  }