Flutter 的新图形引擎 vs 苹果华而不实、耗电的设计实验。
究竟在热议什么?
当苹果发布搭载 “液态玻璃” 界面的 iOS 26 时 —— 其设计流畅、闪耀,近乎充满未来感 —— 众人各执己见。有人称其为移动设计的未来,也有人担忧性能与电池续航。与此同时,在开发者的讨论中,一个新问题悄然浮现:
Flutter 能实现类似这样的效果吗?
在深入探讨之前,我们先理清 Flutter 图形引擎的一些基础知识。
剧透一下:它不再仅仅依靠 Skia 了。
Flutter 的重大变革:从 Skia 到 Impeller
长期以来,Flutter 一直使用 Skia—— 这款为 Android 和 Chrome 提供动力的图形引擎。Skia 性能可靠,但存在一个问题:动画有时会卡顿,尤其是首次加载时,原因在于它需要实时编译着色器。
进入Impeller时代
Impeller 是 Flutter 全新聚焦 GPU 的渲染引擎,其设计旨在攻克 Skia 的短板:
-
预编译着色器:彻底解决动画卡顿问题
-
专为 Metal(iOS)和 Vulkan(Android)打造:采用最新图形技术
-
动画流畅度提升:即使在旧设备或经济型设备上也能实现
-
iOS 端默认配置:Skia 已从 iOS 移除 ——Impeller 成为唯一选项
-
Android 端(API 29+)默认配置:Impeller 成为新安卓设备的标准引擎,旧设备则回退至 OpenGL
Flutter 对性能的追求堪称认真。Impeller 使其真正有机会在流畅度和视觉效果上媲美原生应用。
Impeller 真能实现液态玻璃效果吗?
让我们一探究竟。
Flutter(搭载 Impeller)的技术潜力
- 自定义像素渲染:Flutter 采用自主绘制机制,突破原生组件限制,可实现玻璃态模糊、3D 几何体与分层动画。
- 着色器特效:借助 Impeller 与 dart:ui,可创建磨砂玻璃、光泽表面与柔和反射等视觉效果。
- 图层堆叠系统:Flutter 的渲染模型支持高级分层技术,轻松构建具有深度感的复杂 UI。
- 社区扩展包:现有如
liquid_glass_renderer
和Liquido
等工具包尝试实现玻璃态效果,但仍处于实验阶段,兼容性有待验证。
Flutter 仍存在的短板
- 原生集成能力:液态玻璃效果不仅关乎视觉呈现,更涉及 UI 与光线、动态及环境的交互逻辑。Flutter 目前无法完全调用 iOS 原生图形引擎的所有特性。
- 电池与发热控制:即便苹果自身也面临此问题 ——iOS 26 早期测试版存在电池快速消耗和手机发烫现象。- Flutter 需谨慎控制特效复杂度,避免触发设备过热降频机制。
- 触控响应精度:在某些场景下,原生应用对触摸和手势的处理仍略胜一筹。
Flutter Impeller 与 iOS 26 液态玻璃:快速对比
特性 | Flutter(Impeller) | iOS 26(液态玻璃) |
---|---|---|
默认渲染器 | Metal(iOS)、Vulkan(Android 29+) | Metal(仅 iOS) |
着色器编译 | 预编译 | 深度 GPU 原生着色器 |
UI 自定义 | 完全自主定制 | 系统定义 |
性能 | 极为流畅,因应用而异 | 流畅但(资源)占用高 |
电池影响 | 适中(取决于着色器) | 高(据开发者反馈) |
灵活性 | 极高 | 由苹果控制 |
开发者社区里有哪些热议?
Flutter 开发者已经在尝试制作玻璃效果了。搜索 “glassmorphism Flutter”(Flutter 玻璃拟态 ),你会找到大量演示示例和开源项目。借助 Impeller,这些演示能流畅运行 —— 不会出现卡顿,也无需着色器预热。
再看苹果这边,情况也并非十全十美。iOS 26 早期测试版存在电池续航和性能方面的问题,还有报道称苹果甚至更换了液态玻璃团队的技术负责人。不过到了 iOS 26 测试版 2,苹果改进了模糊效果、可读性,还新增了视差效果,以营造更强烈的深度感 。
这就引出了一个关键问题……
苹果会坚持采用液态玻璃(Liquid Glass)设计吗?
说实话,很难说。
苹果此前就曾改变过路线 —— 还记得 “台前调度”(Stage Manager )最初的规则,或是对 “灵动岛”(Dynamic Island )的调整吧?要是液态玻璃持续出现耗电快的问题,苹果或许会弱化它,或者只限定在 Pro 机型上使用 。
而这正是 Flutter 有望崭露头角的地方:让开发者自主选择在何时、何种设备上运用类似液态玻璃的效果 —— 比如只在平板电脑上启用,或者仅在设备处于插电状态时启用 。
Flutter 开发者该怎么做?
- 试用 Impeller:要是你还在旧版 Android 或网页端使用 Skia,换成 Impeller 并测试动画效果。
- 玩转着色器:学习
FragmentProgram.fromAsset()
,尝试制作光影、模糊和深度效果。 - 瞧瞧社区包:试试
liquid_glass_renderer
和Liquido
这些现成的玻璃效果包,但记住它们还处于试验阶段。 - 巧妙设计:别把特效堆过头。合理运用图层、动效和半透明效果,始终留意测试耗电量。
- 选好场景:把受液态玻璃启发的界面用在特殊页面,比如引导页、媒体播放器或信息看板,别整款应用都用。
最后想说的
Flutter 没必要在苹果擅长的领域击败它。只需提供可控性,呈现现代感。Impeller 让这成为可能。
谁又说得准呢?Flutter 的灵活性,说不定比苹果那些野心勃勃(有时还不太完善)的设计潮流更经久不衰。
最后请关注我的公众号:OpenFlutter