在 Flutter 3.0 发布之前，我们通过 《Flutter 深入探索混合开发的技术演进》 盘点了 Flutter 混合开发的历史进程， 在里面就提及了第一代 PlatformView 的实现 VirtualDisplay...即将被移除，而随着最近 Flutter 3.0 的发布，这个变更正式在稳定版中如期而至，「所以今天就详细分析一下，新的 TextureLayer 如何替代 PlatformView」 。...简单地说，如下图所示： 现在 PlatformViewsController 在加载 PlatformView 时， 在 createForTextureLayer方法里会先创建一个 PlatformViewWrapper...FrameLayout ，主要作用就是：通过 addView添加原生控件，然后「在draw方法里通过super.draw(surfaceCanvas);将 Android View 的 Canvas 替换成PlatformView...在 PlatformView 创建时，Flutter 会为其创建一个SurfaceTexture 用于生成 Surface，相当于是在内存里新建了一个画板。
想要在flutter想显示原生的东东，大家知道，一般有两种方式，一种是PlatformView,另外一种是Texture(俗称外接纹理)。...PlatformView https://api.flutter.dev/flutter/widgets/AndroidView-class.html 主要适用于flutter中不太容易实现的widget...Texture Texture class - widgets library - Dart API 既然有PlatformView可以在flutter中显示原生的view，我们为什么还需要Texture...首先，我们看下flutter创建一个PlatformView做了些什么 为了减少叙述，这里直接拿AndroidView来分析 const AndroidView({ Key key, @...PlatformView上的点击事件是如何从FLutter传递到原生的 确实你肯定也会好奇，那点击事件通过FLutter这边传递到原生的呢，其实，背后的实现是通过消息通道，将点击事件发送过去。
作为系列文章的第二十篇，本篇将结合官方的技术文档科普 Android 上 PlatformView 的实现逻辑，并且解释为什么在 Android 上 PlatformView 的键盘总是有问题。...文章汇总地址： Flutter 完整实战实战系列文章专栏 Flutter 番外的世界系列文章专栏 1、为什么有 PlatformView 因为 Flutter 的实现在概念上类似于 Android...这意味着默认情况下 Flutter UI 永远不会包含 Android Native 的控件，也就是说无法在 Flutter 中集成如 WebView 或 MapView 这些常用的控件。...通过从 VirtualDisplay 输出中获取纹理，并将其和 Flutter 原有的 UI 渲染树混合，使得 Flutter 可以在自己的 Flutter Widget tree 中以图形方式插入 Android...3、总结 PlatformView 的实现模式增加了 Flutter 的生命力和活力，但是相对的也引出了很多问题，比如 #webview-keyboard、#webview、#platform-views
注册PlatformView 创建 MyFlutterViewFactory： import Foundation import Flutter class MyFlutterViewFactory...BuildContext context) { Widget platformView() { if (defaultTargetPlatform == TargetPlatform.android...'); var _data = '获取数据'; @override Widget build(BuildContext context) { Widget platformView(...())), Expanded(child: Container(color: Colors.blue, child: platformView())), Expanded...(child: Container(color: Colors.yellow, child: platformView())), ]), ); } } 此时点击 传递参数给原生
-EventChannel 添加 Flutter 到 Android Activity 添加 Flutter 到 Android Fragment 添加 Flutter 到 iOS 每个工作日分享一篇，...在App 项目的 java/包名 目录下创建嵌入 Flutter 中的 Android View，此 View 继承 PlatformView ： class MyFlutterView(context...: Context) : PlatformView { override fun getView(): View { TODO("Not yet implemented")...: PlatformView { val textView: TextView = TextView(context) init { textView.text =...: PlatformView { val textView: TextView = TextView(context) init { args?.
在以前的 《Android PlatformView 和键盘问题》 一文中介绍过混合开发上 Android PlatformView 的实现和问题，原本 Android 平台上为了集成如 WebView...android.widget.TextView; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import io.flutter.plugin.platform.PlatformView...; import io.flutter.plugin.platform.PlatformView; import io.flutter.plugin.platform.PlatformViewFactory...image 另外还有一个有趣的现象，那就是当 Flutter 有不只一个默认的控件本被显示在一个 PlatformView 区域上时，那么这几个控件会共用一个 FlutterImageView 。...（这部分内容可见 《 Flutter 画面渲染的全面解析》） 其实还有很多的实现细节没介绍，比如： onDisplayPlatformView 方法，也就是在展示 PlatformView 时，会调用
关于 Flutter 混合 PlatformView 的实现已经介绍过两次，随着 5 月份谷歌 IO 的接近，新的 PlatformView 实现应该也会随之而来，本次就从头到尾来一个详细的关于 PlatformView...image.png 但是这个“占位”显示的思路，也起到了一定的作用，在后续 Flutter 支持原生 PlatformView 上起到了带头的作用。...Flutter 初步支持原生控件 为了让 Flutter 真正走向大众化，官方开始推出了官方基于 PlatformView 的系列实现，比如: webview_flutter ，而这个实现 “缝缝补补...，而当你还需要再 PlatformView 上渲染 Flutter 自己的 Widget 时，Flutter 就会通过再叠加一个 FlutterImageView 来承载这个 Flutter Widget...我们调整两个灰色 RE 的位置，让 PlatformView 的灰色 RE 和 Flutter 的红色 RE 交替出现。
在「App」 项目的 「java/包名」 目录下创建嵌入 Flutter 中的 Android View，此 View 继承 「PlatformView」 ： class MyFlutterView(context...: Context) : PlatformView { override fun getView(): View { TODO("Not yet implemented")...: PlatformView { val textView: TextView = TextView(context) init { textView.text =...「args」：Flutter 传递的初始化参数。...: PlatformView { val textView: TextView = TextView(context) init { args?.
对于使用过 Flutter 的开发来说，应该对在 Flutter 混合开发中，通过 PlatformView 接入原生控件的方式并不陌生，而如果你是从 Flutter 1.20 之前就开始使用 Flutter...里 PlatformView 实现的变迁和未来调整，首先这个问题的起因是因为： virtual displayes 和 hybrid composition 两种 PlatformView实现混合使用...只直接通过原生的 addView 方法将 PlatformView 添加到 FlutterView ，这就不需要什么 surface 渲染再去获取的开销，而当你还需要再 PlatformView...通过 PlatformView 直接就通过原生的 addView 方法添加到 FlutterView 上； 而红色的 Flutter 的 Text 控件因为和 PlatformView没交集，...所以还是 Flutter 原本的渲染逻辑； 黄色和蓝色的 Flutter 控件，因为和 PlatformView 有交集，所以通过新的 FlutterImageView 做承载渲染。
首先，我们了解到flutter为我们提供了一个PlatformView，在Android端叫做AndroidView，在iOS端叫做UIKitView。...这个PlatformView就是flutter官方为了解决flutter层去使用原生空间而提供的一个控件。所以，我们只需要做一个插件去封装原生的ImageView即可。...通过PlatformView Android端的文档，我们了解到： The Android view object is created using aPlatformViewFactory....的PlatFormView的实现，看看具体实现代码 public class FlutterImageView implements PlatformView, MethodChannel.MethodCallHandler...[切换效果] 可以看到，正如PlatFormView文档所的那样，使用原生view嵌入到flutter代价是有点昂贵到，从原生切回flutter图片展示是秒显示，而从flutter切回原生有延时，但是我们获得的收益是利用了原生图片加载框架中缓存的图片
插件使用了 PlatformView 将原生地图嵌入到 flutter 页面中，在 flutter 层为 UIKitView、AndroidView，native 在生成地图后根据 viewId 初始化...3.1 什么是PlatformView PlatformView 是允许原生组件嵌入到 Flutter 页面的一种技术，能够让我们将一些原生成熟组件、flutter UI 框架难以实现的地图、WebView...Flutter 提供了 Virtual Display、Hybrid Composition 两种方式实现 PlatformView。...3.2 PlatformView 实现原理 1）flutter 渲染流程 在介绍 Hybrid Composition 实现之前，先通过下图大致了解下 flutter 的渲染流程。...混合开发时，当 A 页面中使用 platformview，开启新容器跳转到 flutter B 页面，platformView 会出现短暂的白屏，从 A 页面跳转 native 页面不会出现。
Flutter基础介绍 Flutter简介 Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台应用，支持Android、IOS、Web、Linux app。...这里 Flutter 提供了两个方案 PlatformView ：是 Flutter 官方提供的一个可以嵌入 Android 和 iOS 平台原生 View 的 widget。...主要实现思路是先利用 PlatformView 构建了创建 Native View 的通道： ? 然后构建了向 Native View 传递方法的通道（如开始音视频渲染、停止音视频渲染） ?...PlatformView 底层用的也是纹理 Texture，它中间多了一层VirtualDisPlay，它会将TXCloudVideoView 的每个像素流经附加的中间图形缓冲区然后输出到 Surface...纯Widget设计 封装 PlatformView 将其设计成一个视频渲染的Widget，把开始视频渲染封装到 SDK 内部，创建即渲染，不好的地方是视频渲染是一个单独的Widget 类，但是停止视频渲染在主类文件方法中
言归正传，本文重点要讲解使用PlatformView对地图实例进行加载的流程。...PlatformView的使用方式是与MethodChannel的使用方式类似的，具体的加载地图实例流程如下： （1）Native端创建TencentMapView TencentMapView继承自PlatformView...PlatformView为Flutter 1.0版本中的通用组件，区分为Android和iOS。在Android平台上叫做 AndroidView组件，在iOS平台，叫UIKitView组件。...因此利用PlatformView构建加载Native SDK中的地图实例并在PlatformView中维护地图实例的生命周期。...private val id: Int, private val activityState: AtomicInteger, tencentMapOptions: TencentMapOptions) : PlatformView
和尚前段时间学习了一下 Flutter 与原生 Android 之间的交互；是以 Android 为主工程，Flutter 作为 Module 方式进行交互；今天和尚尝试一下 Flutter...Android 端 自定义 PlatformView，可根据需求实现 Channel 交互接口； public class NLayout implements PlatformView { private...return mLinearLayout; } @Override public void dispose() {} } 创建 PlatformViewFactory 用于生成 PlatformView...; // Android EventChannel public class NEventTextView implements PlatformView, EventChannel.StreamHandler...使用 PlatformViewHitTestBehavior.opaque 方式，两端均可监听处理，和尚理解，若有叠加 AndroidView 则不会透传到下一层；注意 PlatformView
Flutter 的渲染方式有两种：PlatformView 与 TextureRenderer。...与 TextureRenderer 相比，PlatformView占用资源稍高，且稳定性偏低，但随着 Flutter 版本迭代，鲁棒性不断提高。开发者可根据实际情况通过任意一种方式实现渲染。...ZegoExpressEngine.instance.startPlayingStream(streamID); 若需要在拉流的同时，渲染拉流画面，Flutter 的渲染方式有两种：PlatformView...与 TextureRenderer 相比，PlatformView占用资源稍高，且稳定性偏低，但随着 Flutter 版本迭代，鲁棒性不断提高。开发者可根据实际情况通过任意一种方式实现渲染。...，需要调用 destroyPlatformView 接口销毁 PlatformView。
PlatformView：主要适用于Flutter中不太容易实现的组件，如Webview、视频播放器、地图等，给Flutter提供了嵌入Android和IOS平台原生view的能力。...在之前Flutter技术设施尚不成熟时，PlatformView也为其注入了强大的生命力，在Native端不易实现的组件都可以通过PlatformView方案嵌入原生平台view中。...原生SDK提供了视频渲染view组件，我们只需利用PlatformView的能力，将Native端的视频view嵌入Flutter中即可。...PlatformView在Android端其实是AndroidView，图片下方的第一行参数ViewType用于唯一标识Widget，用于和Android的View建立关联。...实现PlatformView并不复杂，简单了解官方文档后可以利用公式及官方提供的框架代码构造出PlatformView。
在之前的一篇文章中，介绍了在原生项目中引入Flutter。 在这个基础上，记录一下在Flutter中引入原生View。...（建议先看看上面的文章） 最终的结果就是，在原生项目中，以一个View的方式引入Flutter，再在这个Flutter的View中使用一个原生的View。 效果图如下： ?...“route1”会被传入到Flutter中。 第一步 继承PlatformViewFactory在它的create()方法中返回一个在Flutter中要用的原生View。...: PlatformView { var imageView = ImageView(context) imageView.layoutParams = ViewGroup.LayoutParams...imageView.background = context.resources.getDrawable(R.mipmap.ic_launcher) return object : PlatformView
我们团队嗅到了这块的机会，运用Flutter这一近两年大火的跨终端框架，提供Flutter版本的音视频sdk，帮助这些中小企业快速拓展线上业务。...Q3 在对 Flutter 音视频开发实践的过程中，有遇到什么困难吗？...开发实践中最大的困难在视频渲染的优化上： 最开始我们是采用PlatformView来渲染视频的，也就是把视频嵌入到Flutter中进行渲染，但发现GPU消耗比较高。...于是我们仔细研究了PlatformView实现的原理，其实对于安卓来说，PlatformView的底层也是用外接纹理来渲染的。...Q5 对于Flutter技术的初学者，你有什么样的建议？ 官方文档是最好的老师，它会把Flutter框架的底层原理都介绍的很清楚，还提供了代码实践。Dart 也是 Flutter 的基础。
可能很大一部分同学都会和我一样首先跳出来一个词 —— PlatformView 。...确实，PlatformView看起来是个不错的方案，PlatformView作为一个在Flutter 1.0即发布的技术方案，算是比较成熟且上手较快的方案。...），Flutter会给每一个Texture分配一个id，同时Flutter中提供了一个Texture组件。...但可以保证每位小伙伴都看得懂，并且看完以后再看Android部分也是思路清晰（亲测有效 ） FLTVideoPlayer 首先我们可以看到源码中封装了一个叫FLTVideoPlayer的类，很显然，如果仅仅是PlatformView...附上一张流程图，方便大家理解： 那么我们在选择实现方案时是选择PlatformView还是Texture呢？这里引用一张图可以让各位更好的了解。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
