Flutter（六）Flutter界面中嵌入Android原生视图

最新推荐文章于 2025-07-18 15:28:13 发布
最新推荐文章于 2025-07-18 15:28:13 发布
阅读量3.9k 收藏 7
点赞数 4
CC 4.0 BY-SA版权
文章标签： android Flutter 使用原生视图 PlatformView 踩坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn_aiyang/article/details/107384493
本文介绍如何在Flutter应用中使用PlatformView嵌入Android原生TextView，通过MethodChannel进行通信更新属性，详细阐述了从创建Flutter工程、注册原生组件到实现PlatformView的全过程，并对性能进行了思考，提醒开发者谨慎使用原生组件以避免性能影响。

目录

前言

一、Flutter 准备阶段

          二、在原生中编写并注册原生组件

（1）大致流程介绍：

（2）具体实现步骤：

三、整体流程总结

四、性能思考

Flutter（一） 安装部署与认识Dart语言

Flutter（二）Android集成Flutter项目并实现跳转到 Flutter 界面

Flutter（三）Flutter与Android原生Activity交互及传递​​数据  

Flutter（四）解决FlutterView显示黑屏卡顿问题

Flutter（五）Dio接口请求二次封装加Header及MD5加密

Flutter（六）Flutter界面中嵌入Android原生视图

前言

 

前面介绍了，在Android在原生Activity里通过Vie

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Flutter混编-与Android原生的混编
u011212112的专栏
04-19 2088
刚刚在Android项目 混编了flutter特意记录一下 具体的操作可以参考该链接flutter 与Android原生的混编 这次简要介绍下具体的流程，以及实际使用用遇到的问题 混编前的准备 新建flutter model 注意不是flutter project，因为是要将flutter当做lib去引入Android项目里面，新建的flutter model 在项目的层级上要放到 与Andro...
Android&Flutter混合开发
跟着哆啦学Android
05-30 1635
混合开发简单来说就是，既有Flutter的Dart代码，又有平台相关的原生代码，如Kotlin、Swift。在改动比较小，且追求极致体验的主要功能模块，采用原生开发，搭建一个所谓的“壳”。然后在一些经常变动的界面，如应用的首页、活动页面，以及简单的UI界面，如设置界面、关于界面，使用Flutter进行开发。这样做的好处就是可以降低错误率，提高开发效率，缩减开发周期，提升产品竞争力和快速抢占市场的能力。
Flutter中嵌入Android 原生TextView实例教程
01-21
前言 本篇文章 中写到的是 flutter 调用了Android 原生的 TextView 案例 添加原生组件的流程基本上可以描述为： 1 android 端实现原生组件PlatformView提供原生view 2 android 端创建PlatformViewFactory用于生成PlatformView 3 android 端创建FlutterPlugin用于注册原生组件 4 flutter 平台嵌入 原生view 1 创建原生组件 创建在fLutter工程时会生成几个文件夹，lib是放flutter工程代码，android和ios文件夹分别是对应的双平台的原生工程。 在这里直接打开An
Flutter中使用Android原生View视图
m0_65715940的博客
05-23 1094
本文介绍了如何在Flutter中集成Android原生视图以显示RTSP视频流
总结flutter玩转之-flutter 调用安卓原生view（使用AndroidView）
qq_30519365的博客
10-27 2067
下期将介绍安卓view 承载fluuter 的页面姿势O(∩_∩)O哈哈~
flutter中使用android原生视图
weixin_43987915的博客
07-07 1232
虚拟显示模式（Virtual displays） 将 android.view.View 实例渲染为纹理，不会嵌入到 Activity 的视图层次结构中。 键盘处理和辅助功能可能无法工作。 混合集成模式（Hybrid composition） 需要 Flutter 1.22（推荐 1.22.2）。 将原生的 android.view.View 附加到视图层次结构中。键盘处理和无障碍功能是开箱即用的。 Android 10 之前，这个模式会大大降低 Flutter UI 的帧率（FPS）。此widget继承S
Android笔记：在Flutter中嵌入原生View
2401_84912146的博客
05-12 423
在Flutter中引用即可。@override),),),),),注：此方法需要Android API 20以上，自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
flutter嵌入原生组件_Flutter原生混合开发
weixin_39828193的博客
01-09 886
混合开发简介使用Flutter从零开始开发App是一件轻松惬意的事情，但对于一些成熟的产品来说，完全摒弃原有App的历史沉淀，全面转向Flutter是不现实的。因此使用Flutter去统一Android、iOS技术栈，把它作为已有原生App的扩展能力，通过有序推进来提升移动终端的开发效率。 目前，想要在已有的原生App里嵌入一些Flutter页面主要有两种方案。一种是将原生工程作为Flutter工...
在iOS、Android原生项目里嵌入flutter_module.zip
最新发布
08-28
4. 使用Flutter视图控制器在原生视图中加载Flutter视图。 5. 管理Flutter视图的生命周期，确保与原生视图的生命周期同步。 在Android平台上，嵌入Flutter模块的过程则有所不同： 1. 将Flutter模块作为依赖项添加到...
flutter页中嵌入Android控件---AndroidView
haoxuhong的博客
07-01 2555
AndroidView 在Flutter小部件上嵌入一个Android的View,与UiKitView对应，UiKitView是在Flutter小部件上嵌入一个ios的View.源码 属性 释义 viewType → String 这个小部件要嵌入的Android视图类型的唯一标识符。 clipBehavior → Clip 内容被剪辑的方式，默认是Cli
安卓项目混编flutter使用腾讯x5，在flutter内嵌原生页面查看office文件，kotlin版
11-25
安卓项目混编flutter使用腾讯x5（tbs）实现查看doc，ppt，pdf，xls等office文件，在flutter页面中内嵌原生页面，适用于flutter sdk 1.12，新版腾讯x5支持64位手机，使用kotlin，忘记删build，下载后删除重新build即可
Android 与flutter混合开发以及消息传递示例
04-02
flutter与Android混合开发示例，flutter与Android之间相互通信的示例
Flutter——Android原生View是如何通过Flutter进行加载
人生在世
07-18 537
Flutter 中加载 Android 原生视图（View）（平台视图）机制。
android混编flutter
xuyushiguang的博客
01-13 265
首先Android工程文件要和flutter在同级目录； 1）创建flutter module flutter create -t module flutter_m 2）在Android项目的 setting_gradle 里面添加 setBinding(new Binding([gradle: this, mainModuleName: '安卓工程名'])) evaluate(new File( settingsDir.parentFile, 'flutter_m/.an
如何将flutter集成到andriod安卓？
ruiruiddd的博客
03-30 1249
原帖: link 本文主要解决3个问题： 集成Flutter到Android项目,可以打开Flutter的默认页面 可以跳转到Flutter的指定页面 可以将Flutter的指定组件嵌入到原生页面，并传递参数 1.集成Flutter到Android 这里，我们以Flutter Module创建一个Flutter工程(flutter)，然后run起来，就可以在.android/Flutter/build/outouts/aar文件夹下面得到这个aar 这里之所以以Flutter Modu
Flutter混编-Android集成
LIANGJIANGLI的专栏
11-13 540
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、优快云 技术博客 3 篇
Flutter与Android混编
XBlithe的博客
12-22 3299
各端分离方案是iOS、Android和Flutter分别作为三个独立项目存在，将Flutter工程的编译产物作为iOS工程和Android工程的依赖模块，原有工程的管理模式不变，对原生工程没有侵入性，无需额外配置工作。 这种方案需要单独创建Flutter项目，然后通过iOS（CocoaPods）和安卓的依赖管理工具将Flutter项目build出来的framework、资源包等放入Native工程以供使用。 这种方式可以将iOS、Android和Flutter项目放在一个目录下面作为一个项目来管理，也可以不
android混合编程,Flutter(Android 混合开发)
weixin_36340926的博客
05-26 320
前言Flutter 支持作为 android Moudle 出现在项目中.这样就可以在 已有的项目中 使用.虽然现在Flutter 比较受关注,但是和weex 一样 ,大部分都只是在观望 不是真正的进行使用.所以 如果用还是混合开发 原生+Flutter 方式比较合适(自我感觉).写一个demo 进行Android及Flutter 交互.(IOS 方法基本一致).Flutter 调用 androi...
Flutter与Android混合开发
u013297881的专栏
02-29 387
1.最先看的，大神写的很好，简单易懂， https://kevinwu.cn/p/964c6c3/#%E6%96%B0%E5%BB%BAFlutter-Module 2.后来查的资料，大哥写的也很好，里面提到了几个坑， https://blog.youkuaiyun.com/Android_SE/article/details/92654464 个人记录 Android项目 和fluttermodu...
flutter中嵌入原生Android View
07-22
在 Flutter 应用中嵌入原生 Android View 的方法涉及多个步骤，主要包括 Android 端和 Flutter 端的配合实现。 ### Android 端实现 1. **实现 PlatformView** 首先，需要在 Android 端创建一个继承自 `PlatformView` 的类，用于提供原生视图的实现。例如，可以创建一个 `ComputeLayoutPlatform` 类，并在其构造函数中初始化一个 Android 原生 View（如 TextView 或其他自定义组件）。 2. **创建 PlatformViewFactory** 接着，需要创建一个 `PlatformViewFactory` 的子类，该类用于生成 `PlatformView` 实例。在这个工厂类中，通常会定义如何创建平台视图，并传入必要的参数（如上下文、信使等）[^4]。 3. **注册 FlutterPlugin** 为了使 Flutter 应用能够识别并使用这个原生组件，需要创建一个 `FlutterPlugin` 的实现类，并在其中注册 `PlatformViewFactory`。这通常在 `onAttachedToEngine` 方法中完成，通过 `registrar.platformViewRegistry().registerViewFactory` 方法将工厂类注册到 Flutter 引擎中。 ### Flutter 端实现 1. **使用 AndroidView 嵌入原生视图** 在 Flutter 端，可以使用 `AndroidView` 小部件来嵌入原生 Android 视图。通过指定 `viewType` 属性，Flutter 会查找对应的 `PlatformViewFactory` 并创建相应的原生视图。以下是一个简单的示例代码： ```dart class AndroidViewDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('嵌入原生视图'), ), body: Center( child: AndroidView( viewType: 'AndroidView', // 与 Android 端注册的 viewType 一致 ), ), ); } } ``` 2. **处理生命周期和通信** 在某些情况下，可能需要在 Flutter 和原生视图之间进行数据交互或事件监听。可以通过 `MethodChannel` 或 `EventChannel` 来实现跨平台通信。例如，可以在 `PlatformView` 中初始化一个 `MethodChannel`，并在 Flutter 端通过相同的通道发送消息或接收响应。 ### 示例代码 #### Android 端代码（Kotlin） ```kotlin class ComputeLayoutPlatformFactory( private val context: Context, private val messenger: BinaryMessenger ) : PlatformViewFactory(StandardMessageCodec.INSTANCE) { override fun create(context: Context, viewId: Int, args: Any?): PlatformView { return ComputeLayoutPlatform(context, viewId, args, messenger) } } class ComputeLayoutPlatform( private val context: Context, private val viewId: Int, private val args: Any?, private val messenger: BinaryMessenger ) : PlatformView { private lateinit var textView: TextView override fun getView(): View { textView = TextView(context) textView.text = "这是一个原生 TextView" return textView } override fun dispose() { // 清理资源 } } ``` #### Flutter 端代码（Dart） ```dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('嵌入原生视图'), ), body: Center( child: AndroidView( viewType: 'AndroidView', ), ), ), ); } } ``` ### 相关问题 1. 如何在 Flutter 中与嵌入的原生 Android 视图进行通信？ 2. 在 Flutter 中嵌入原生 Android 视图时，如何处理生命周期事件？ 3. 如何在 Flutter 中动态切换不同的原生 Android 视图？ 4. 使用 PlatformViewFactory 时，如何传递参数给原生视图？ 5. 在 Flutter 中嵌入原生 Android 视图时，如何处理触摸事件和用户交互？ 这些问题可以帮助进一步深入理解和优化 Flutter 与原生 Android 视图的集成。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艾阳Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值