摘要:在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择。本文希望向大家介绍AndroidView的使用方式以及在此基础之上拓展的双端嵌入Native组件的解决方案。
引言
在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择。本文希望向大家介绍AndroidView的使用方式以及在此基础之上拓展的双端嵌入Native组件的解决方案。
1. 使用教程
1.1. DemoRun
嵌入地图这一场景可能在很多App中都会存在,但是现在的地图SDK都没有提供Flutter的库,而自己开发一套地图显然不太现实。这种场景下,使用混合栈的形式是一个比较好的选择。我们可以直接在Native的绘图树中嵌入一个Map,但是这个方案嵌入的View并不在Flutter的绘图树中,是一种比较暴力且不优雅的方式,使用起来也很费劲。
这时候,使用Flutter官方提供的控件AndroidView就是一种比较优雅的解决方案了。这里做了一个简单的嵌入高德地图的demo,就让我们跟着这个应用场景,看一下AndroidView的使用方式和实现原理。
1.2. AndroidView使用方式
AndroidView的使用方式和MethodChannel类似,比较简单,主要分为三个步骤:
第一步:在dart代码的相应位置使用AndroidView,使用时需要传入一个viewType
,这个String将用于唯一标识该Widget,用于和Native的View建立关联。
第二步:在native侧添加代码,写一个PlatformViewFactory,PlatformViewFactory的主要任务是,在create()
方法中创建一个View并把它传给Flutter(这个说法并不准确,但是我们姑且可以这么理解,后续会进行解释)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r7nEmjMM-1592895474008)(https://upload-images.jianshu.io/upload_images/23675445-c62ac572e9cc06da.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
第三步:使用registerViewFactory()
方法注册刚刚写好的PlatformViewFactory,该方法需要传入两个参数,第一个参数需要和之前在Flutter端写的viewType
对应,第二个参数是刚刚写好的的PlatformViewFactory。
配置高德