flutter插件基础之调用原生界面和flutter组件互相显示功能（四）

最新推荐文章于 2025-04-07 23:05:33 发布

XiaoBaiGeYHS

最新推荐文章于 2025-04-07 23:05:33 发布

阅读量1.8k

点赞数

分类专栏： flutter技术扒研 flutter插件开发文章标签： android flutter ios

本文链接：https://blog.youkuaiyun.com/XiaoBaiGeYHS/article/details/126524947

版权

前几篇我们对flutter中的数据的传递层MethodChannel和监听响应层EventChannel进行了全面的介绍和案例展示，本篇

开始讲解flutter中如何显示原生View，如Android 中的AndroidView的显示和iOS中的UiKitView的显示过程

来吧，开始~~~展示，本篇末有彩蛋哦😄😄！

老规矩，先上目录为

四.flutter代码中显示原生View

1.显示原生View的原理说明

1.1.AndroidView和UiKitView

1.2.唯一标识key值的设定

1.3.原生端的工厂类创建

2.同原生代码交互示例

2.1.安卓的显示与传值

1.Flutter端

2.Native(Android)端

2.2.iOS的显示与传值

1.Flutter端

2.Native(iOS)端

3.注意事项细节

四.flutter代码中显示原生View

1.显示原生View的原理说明

1.1.AndroidView和UiKitView

顾名思义，flutter为了兼容原生的安卓View在flutter中显示用AndroidView来统一替代所有需要显示在flutter中的安卓view，iOS同理用的是UiKitView，简单来说，这里的AndroidView和UiKitView相当于是原生的一个小仓库，所有的原生view都必须转换为flutter对应的AndroidView或UiKitView，至于具体的比如UiKitView有什么功能，比如UILable，UIButton则依赖于原生自身的特性决定其功能。

1.2.唯一标识key值的设定

同前面我们讲的MethodChannel和EventChannel调用机制，即通过唯一标识符在App启动页或者原生插件页中一开始进行相应的注册操作，然后在flutter中对其绑定同样的key，如此可根据key的一致性，来找到原生和flutter的调用入口，同理这里的原生View展示在flutter的流程也需要保持唯一标识key的统一。

如下所示为flutter代码中对安卓和iOS设置的key值为native_view_show字符标记。

const String viewType = 'native_view_show';

// print("tempcreationParams = $tempcreationParams");

return Container(

width: ScreenUtils.getScreeenWidth(context),

height: ScreenUtils.getScreeenHeidth(context),

alignment: Alignment.center,