掘力计划第 20 期:Flutter 混合开发的混乱之治

这篇具有很好参考价值的文章主要介绍了掘力计划第 20 期:Flutter 混合开发的混乱之治。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在掘力计划系列活动第20场,《Flutter 开发实战详解》作者,掘金优秀作者,Github GSY 系列目负责人恋猫的小郭分享了Flutter 混合开发的混乱之治。

Flutter 基于自研的 Skia 引擎实现了跨平台高性能渲染,但其独立的渲染层带来了与 Android 混合开发的技术挑战。经过几年的演进,Android 目前提供了多种混合渲染方案,但都无法完美解决问题,且共存于 Flutter API 中,增加了复杂性。本文将深入解析 Flutter Android 混合开发面临的困境,以及开发者应对策略。

Flutter 独立的渲染机制

Flutter 能够跨平台高性能渲染的关键在于其自研的 Skia 图形渲染引擎。Skia 通过自身的 renderers、GPU 线程等直接与 GPU 层进行交互,实现绘图功能。这使得 Flutter 的渲染层可以独立于 Android 的原生 UI 线程之外。

这种独立的渲染机制给 Flutter 带来很大优势,不依赖原生视图层即可实现高效的跨平台渲染。但是同时也导致了 Flutter 要与原生视图进行混合开发时的困难。

如果用一个简单的类比,Flutter 更像是一个游戏引擎。想要往 Unity 这类游戏引擎中插入原生 Android 视图,就像往 HTML 中直接嵌入一个 Canvas 元素一样困难。这需要游戏引擎提供针对性的接口与机制,将不同的 UI 系统进行「适配」。

针对这个问题,Android 和 Flutter 社区也经历了多年的探索,提供了一系列的混合渲染方案。

Android 混合渲染方案演进

Android 在支持 Flutter 混合开发时,经历了多种技术方案的演进过程。现阶段主要存在以下三种混合渲染技术:

VD 模式

VD 全称 Virtual Display,表示利用虚拟显示的方式进行混合渲染。其关键是采用 VirtualDisplay 将原生视图渲染到一个内存缓冲区中,得到相应的渲染纹理。

Flutter 通过特定的 API 调用,可以获取这个渲染纹理,并集成到自身的 Scene 中进行统一渲染。

VD 最大的 特点就是渲染的控件其实不是真实存在屏幕位置,而是在内存,所以容易有触摸和键盘问题。

HC 模式

HC 全称 Hybrid Composition。它的思路是直接将原生视图通过 Add View 的方式添加到 Flutter 的 View 层次中,进行物理层面的视图混合。

这种直接混合模式可以保存原生视图的用户交互,并且可与 Flutter 视图自由叠加。但是由于需要跨线程同步渲染,可能会引入一定的性能开销。

TLHC 模式

TLHC 即 Texture Layer Hybrid Composition。这是 Android 团队後期提出的方案,试图结合 VD 和 HC 两种模式的优点。

TLHC 会通过 hook 原生视图的 onDraw 方法,将其渲染输出重定向到内存中,再提供给 Flutter 作为纹理。这样既避免了线程同步,也可以像 HC 那样自由布局。

但是 TLHC 不支持 SurfaceView 等基于独立 Surface 的视图类型。对于一些依赖 SurfaceView 的逻辑,如地图或视频播放,TLHC 存在兼容性问题。

共存的模式带来的困境

经过几年的演进,Flutter 现在已经可以通过上述三种模式支持 Android 混合开发了。但它们都存在自身的优劣势,无法解决所有的问题场景。

更重要的是,这三种模式现在同时存在于 Flutter 的 API 中,可以被开发者同时使用:

Plain Text
// VD模式
initAndroidVew()
// HC模式
initSurfaceAndroidView()
// TLHC模式
initAndroidView()

这其实带来了很大的复杂性。首先,开发者需要自行理解不同模式的适用场景,进行正确的调用。

其次,随着 Flutter 版本的演进,默认的模式也在变化。例如在早期只有 VD,到 1.2 提供 HC,3.0 又引入 TLHC。这意味着在版本升级后,你的混合视图可能会在不知情的情况下发生渲染模式变化,导致问题。

再者,TLHC 存在对 SurfaceView 的兼容性问题。就算默认使用 TLHC,后续引入 SurfaceView 也可能触发问题。

除此之外,不同模式的性能开销也存在差异。HC 和 TLHC 的额外渲染消耗需要评估。模式切换也可能影响渲染性能。

综上所述,困扰 Flutter Android 混合开发的主要问题在于:

  • 存在多种共存的渲染模式,各有特性,选择复杂

  • 模式之间兼容性存在,可能引入难以察觉的问题

  • 性能开销和稳定性难以保证

这已经成为困扰 Flutter 混合渲染的主要困境。

开发者应对策略

面对复杂的混合渲染困境,Flutter 开发者也形成了一些应对策略:

  • 优先使用 TLHC 模式,能覆盖更多场景
  • 调用时详细指定模式,不要依赖默认值
  • 注意版本变更带来的潜在问题
  • 留意是否引入了 SurfaceView 等不兼容场景
  • 评估不同模式的性能开销区别
  • 通过自身封装控制模式变更范围
  • 提前测试不同模式的兼容性

当然,这需要开发者对不同混合渲染模式有足够的理解,才能做出正确的技术选型。实际使用中也需要关注模式带来的兼容性风险,建立健壮的自测方案。

未来 Flutter 混合渲染模式是否还会继续增多也需要持续跟进。理想情况下,如果能够演进出一个统一的混合解决方案,将大大简化 Android 平台的混合开发。

总结

Flutter 基于 Skia 的独立渲染机制,给其在 Android 平台的混合开发带来了挑战。经过几年探索,Android 形成了多种混合渲染方案。但都无法完美解决问题,它们的共存也增加了复杂性。

开发者需要深入理解不同模式,并有针对性地进行场景选择和风险评估。未来仍需要社区持续努力,简化这一关键的技术难题,以进一步发挥 Flutter 的跨平台优势。

关于掘力计划

掘力计划由稀土掘金技术社区发起,致力于打造一个高品质的技术分享和交流的系列品牌。聚集国内外顶尖的技术专家、开发者和实践者,通过线下沙龙、闭门会、公开课等多种形式分享最前沿的技术动态。文章来源地址https://www.toymoban.com/news/detail-630084.html

到了这里,关于掘力计划第 20 期:Flutter 混合开发的混乱之治的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • TA百人计划学习笔记 3.2混合模式及剔除

    资料 源视频 【技术美术百人计划】图形 3.2 混合模式及剔除_哔哩哔哩_bilibili ppt https://github.com/sunkai174634/PhotoShopBlendModeUnityShader 实例 notargs.com 混合模式 unity 官方文档 ShaderLab:混合 - Unity 手册 是什么 从渲染流程解释 从效果上解释 Blend 就是把两种颜色混在一起。具体就是把某

    2024年01月25日
    浏览(35)
  • Flutter混合项目构建问题集锦

    以下是报错信息 Could not determine the dependencies of task ‘:app:mergeCeshiDebugAssets’. Could not resolve all task dependencies for configuration ‘:app:CeshiDebugRuntimeClasspath’. Could not resolve project :flutter. Required by: project :app No matching configuration of project :flutter was found. The consumer was configured to find a runti

    2024年02月12日
    浏览(36)
  • Flutter 生成小程序的混合 App 实践

    微信小程序发展的越来越快,目前小程序甚至取代了大部分 App 的生态位,公司的坑位不增反降,只能让原生应用开发兼顾或换岗进行小程序的开发。 以我的实际情况来讲,公司应用采用的 Flutter 框架,同样的功能不可避免的就会存在 Flutter 应用开发和微信小程序开发兼顾的

    2024年02月09日
    浏览(33)
  • 教程:Flutter 和 Rust混合编程,使用flutter_rust_bridge自动生成ffi代码

    实践环境:Arch Linux flutter_rust_bridge官方文档 Flutter环境配置教程 | Rust环境配置教程 记录使用 flutter_rust_bridge 遇到的一些坑。 假设我们已经配置了Fluuter与Rust环境 现在直接使用flutter_rust_bridge模板创建自己的项目 运行: 现在我们先让项目跑起来: 编辑 native/src/api.rs 安装代码生

    2024年02月09日
    浏览(86)
  • 20多年前微软曾计划收购,任天堂嘲讽道:“笑死我了”

    前不久,Xbox主机迎来20周年纪念。在这次纪念活动中,微软大方晒出了一封当年公司副总裁写给任天堂高管的一封信,内容是说服对方同意被收购。 20多年前,当微软准备发布第一代Xbox时,公司对他们缺少重磅游戏IP支撑的情况感到担忧。所以有人提出了一个建议:收购任天

    2024年02月07日
    浏览(39)
  • Ubuntu20.04安装NVIDIA混合精度计算库apex全流程及各类报错问题解答

    背景:跟李沐老师一起探索RTX 3090的深度学习浮点运算性能,需要安装apex进行半精度运算,本文总结了Ubuntu20.04安装NVIDIA混合精度计算库apex全流程及各类报错问题解答 环境: Ubuntu20.04 AMD 5800 8-core 16-Thread NVIDIA RTX 3090 Pytorch1.13(gpu) Python3.9 CUDA11.7 确保你的apex跟CUDA版本对应,如果

    2024年02月12日
    浏览(43)
  • uniapp+h5混合开发

    为了减少app频繁上架,频繁更新,决定放弃纯uniapp开发,改用uniapp(后续简称uni)+h5的方式进行混合开发。 技术选型: 整个app架子用uni(vue3),h5采用vue3+vant4,然后使用uni的webview进行页面控制。由于我们是由vue2升级到vue3,所以之前的一些代码需要做调整,这里自己去看一下

    2024年02月07日
    浏览(38)
  • MATLAB+JAVA的混合开发

    近期项目中需要使用matlab跟java做混合开发。主要记录一下,此次开发遇到的问题点。 环境:使用的matlab版本是   R2018b。 当前状况:MATLAB代码已经编写好,且运行成功。需要打成jar包才可以被java调用。 步骤一: 按照教程安装好matlab后,打开matlab,查看当前matlab依赖的jdk版

    2024年02月10日
    浏览(40)
  • 原生Android与uniapp开发的H5混合开发

    vue版本选择2.0  记住一点,打包H5前修改配置,否则在Android中打开会白屏,修改方式如下 打包成H5,打包后可以在浏览器打开确保有内容 assets文件夹没有就自己建 xml布局文件处加入一个webview标签 Activity的 onCreate周期加入如下代码 运行项目就可以看到uniAPP的页面了

    2024年02月21日
    浏览(50)
  • MAUI+Blazor混合应用开发示例

    笔者之前在公司搭建过一套生产管理系统,该系统要求能和硬件进行串口通信,同时又要方便后台进行信息查询。笔者给出的解决方案就是: MAUI + Blazor ,这样只需要提供一套UI,就能满足桌面端、移动端和Web端三种不同应用场景。今天要介绍的是基于桌面端的开发实现(实

    2024年02月11日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包