FSA全栈行动 FSA全栈行动
首页
  • 移动端文章

    • Android
    • iOS
    • Flutter
  • 学习笔记

    • 《Kotlin快速入门进阶》笔记
    • 《Flutter从入门到实战》笔记
    • 《Flutter复习》笔记
  • 内功心法

    • 《深入浅出设计模式Java版》笔记
前端
后端
  • 产品
  • 代理
  • 提效
  • 逆向
  • 分类
  • 标签
  • 归档
  • LinXunFeng
  • GitLqr

公众号:FSA全栈行动

记录学习过程中的知识
首页
  • 移动端文章

    • Android
    • iOS
    • Flutter
  • 学习笔记

    • 《Kotlin快速入门进阶》笔记
    • 《Flutter从入门到实战》笔记
    • 《Flutter复习》笔记
  • 内功心法

    • 《深入浅出设计模式Java版》笔记
前端
后端
  • 产品
  • 代理
  • 提效
  • 逆向
  • 分类
  • 标签
  • 归档
  • LinXunFeng
  • GitLqr
  • AndroidUI

  • Android第三方SDK

  • Android混淆

  • Android仓库

  • Android新闻

  • Android系统开发

  • Android源码

  • Android注解AOP

  • Android脚本

  • AndroidTv开发

  • AndroidNDK

  • Android音视频

  • Android热修复

  • Android性能优化

  • Android云游戏

  • Android插件化

  • iOSUI

  • iOS工具

  • iOS底层原理与应用

  • iOS组件化

  • iOS音视频

  • iOS疑难杂症

  • iOS之Swift

  • iOS之RxSwift

  • iOS开源项目

  • iOS逆向

  • Flutter开发

    • Dart - 抽象类的实例化
    • Flutter - 打印好用的Debug日志
    • Flutter - 混合开发
    • Flutter - 解决混合开发iOS脚本打包遇到的问题
    • Flutter - 低版本在iOS14上遇到的问题与解决方案
    • Flutter - 解决原生弹窗的触摸事件被Flutter响应的问题
    • Flutter - 实现列表上下拉切换header
    • Flutter - 获取ListView当前正在显示的Widget信息
    • Flutter - 列表滚动定位超强辅助库,墙裂推荐!🔥
    • Flutter - 快速实现聊天会话列表的效果,完美💯
    • Flutter - 聊天输入框更新文本时的必备优化点🔖
    • Flutter - 我给官方提PR,解决run命令卡住问题 😃
    • Flutter - 探索run命令到底做了什么 🤔
    • Flutter - 引擎调试(iOS篇)🛠
    • Flutter - 引擎调试bug到提交PR实战 🐞
    • Flutter - 船新升级😱支持观察第三方构建的滚动视图💪
    • Flutter - 瀑布流交替播放视频 🎞
    • Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖
    • Flutter - 滚动视图中的表单防遮挡 🗒
    • Flutter - 秒杀1/2曝光统计 📊
    • 一天内加入 Flutter 和 FlutterCandies 两大组织是什么体验 🧐
    • Flutter - 如何快速搓一个微信通讯录列表(azlist) 📓
    • Flutter - 混编项目集成Shorebird热更新🐦(安卓篇)
    • Flutter - 混编项目集成Shorebird热更新🐦(iOS篇)
    • Flutter - 解决返回原生页面时dispose方法未被触发的问题 🐞
    • Flutter - 升级3.19之后页面多次rebuild?🤨
    • Flutter - 热更新 Shorebird 1.0 正式版来了 🐦
    • Flutter - 使用Pigeon实现视频缓存插件 🐌
    • Flutter - 轻松搞定屏幕旋转功能 😎
    • Flutter - 解决Connection closed before full header was received
    • Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻
    • Flutter - 支持观察NestedScrollView,兼容性更强 😈
    • Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻
    • Flutter - 升级到3.24后页面还会多次rebuild吗?🧐
    • Flutter - 轻松实现PageView卡片偏移效果
    • Flutter - 轻松搞定炫酷视差(Parallax)效果
    • Flutter - 危!3.24版本苹果审核被拒!
    • Flutter - 子部件任意位置观察滚动数据
    • Flutter - iOS编译加速
    • Flutter - Xcode16 还原编译速度
    • Flutter - GetX Helper 助你规范应用 tag
    • Flutter - GetX Helper 如何应用于旧页面
    • Flutter - 聊天面板库动画生硬?这次让你丝滑个够
    • Flutter - 使用本地 DevTools 验证 SVG 加载优化
    • Flutter - 详情页 TabBar 与模块联动?秒了!
    • Flutter - 详情页初始锚点与优化
    • Flutter - Melos Pub workspaces 实践
    • Flutter webview 崩溃率上升怎么办?我的分析与解决方案
    • Flutter 多仓库本地 Monorepo 方案与体验优化
    • Flutter 拖拉对比组件,换装图片前后对比必备
    • Flutter 3.44 插件内置 Kotlin (KGP) 双向兼容适配指南
    • Flutter 无障碍开发实战:玩转 Semantics 解决视障用户使用痛点
    • 玩转 WebSocket:从原理到 Flutter 实战
    • 别在 Flutter 的 main() 里乱锁屏幕方向,小心 iPad 分屏功能被你搞没了
    • Flutter 3.44 性能飞跃:深度解析 Android Platform View 的 HCPP 新特性
      • 一、背景:Android Platform View 的演进历程
        • 1、方案对比
        • 2、核心差异点
      • 二、HCPP 原理:打破“渲染税”
        • 1、理解 Surface
        • 2、HCPP 的流水线逻辑
      • 三、实战:如何在你的项目中开启 HCPP
        • 1、配置 AndroidManifest.xml
        • 2、Dart 层集成
        • 3、原生端实现(Kotlin)
        • 4、运行测试
      • 四、最后
    • 给 Flutter 插件加上 Swift Package Manager 支持
  • 移动端
  • Flutter开发
GitLqr
2026-07-25
目录

Flutter 3.44 性能飞跃:深度解析 Android Platform View 的 HCPP 新特性

欢迎关注微信公众号:[FSA全栈行动 👋]

# 一、背景:Android Platform View 的演进历程

如果你在 Flutter 项目里嵌入过 Google Map、WebView 或者原生的视频播放器,那你一定经历过 Platform View 带来的“两难境地”。

长期以来,在 Flutter 中集成原生视图就像是在走钢丝:要么选择 Virtual Display,结果原生键盘和无障碍功能(Accessibility)直接歇菜;要么选择 Hybrid Composition,结果原本流畅的 120Hz 滚动瞬间变成“幻灯片”,帧率跌到谷底。

为了解决这个问题,Flutter 团队折腾了很久。我们先来盘点一下目前已知的几种方案及其优缺点,看完你就能理解为什么 HCPP 这么重要。

# 1、方案对比

方案

渲染性能

交互体验

核心痛点

Virtual Display (VD)

极高

极差

无法处理键盘焦点、无法支持无障碍服务

Hybrid Composition (HC)

极低

满分

线程同步开销大,滑动时频繁掉帧

TLHC (优化版 HC)

中等

中等

高速滑动时仍会有微小卡顿或裁剪问题

HCPP (新特性)

极高

满分

需要 Android 14 + Vulkan + Impeller

# 2、核心差异点

  • Virtual Display:Flutter 引擎在后台画一张“隐形画布”(GPU Texture),让原生视图画在上面,再把这张画贴到屏幕上。这方案渲染飞快,但系统压根不知道原生视图的存在,所以键盘、选中文本这些交互全废了。

  • Hybrid Composition:为了解决交互问题,Flutter 把原生视图直接塞进 Android 的视图层级里。虽然体验好,但代价是 Flutter 的渲染线程和 Android 的主线程得频繁“碰头”同步,还得不停地在两个线程间拷贝像素数据,性能损耗(Rendering Tax)非常恐怖。

  • TLHC:这是之前的折中方案,用了 SurfaceTexture 来优化。虽然比 HC 快一点,但在快速滑动时,依然难逃掉帧和视觉撕裂的坑。

# 二、HCPP 原理:打破“渲染税”

Flutter 3.44 引入的 Hybrid Composition++ (简称 HCPP),目标就是实现:既要 Virtual Display 的高性能,也要 Hybrid Composition 的完美交互。

它的核心思路是:既然“合并像素”这一步最费劲,那我们干脆不合并了,直接让系统(OS)来搞定。

# 1、理解 Surface

要理解 HCPP,得先搞清楚 Android 图形系统里的 Surface。

你可以把物理屏幕想象成一个投影台:

  • Flutter 引擎在 A 胶片上画 UI,生成一个 Surface。

  • 原生视图(如 Google Map)在 B 胶片上画内容,也生成一个 Surface。

在以前,Flutter 必须要在自己家里把 A 和 B 拼好再交出去。而 HCPP 的做法是:把 A 和 B 叠在一起,直接扔给系统的调度员(SurfaceFlinger),让它在硬件层面完成合成。

# 2、HCPP 的流水线逻辑

HCPP 的工作流程如下:

  1. Impeller 渲染:Flutter 使用全新的 Impeller 引擎(基于 Vulkan)渲染 UI,生成一个原生的 Surface。

  2. 原生视图渲染:原生组件(如 WebView)在它自己的 Surface 上绘图。

  3. SurfaceControl 提交:Flutter 不再尝试合并像素,而是把这两个 Surface 封装成一个 SurfaceControl 事务。

  4. SurfaceFlinger 合成:Android 系统的 SurfaceFlinger 接收到指令,直接在硬件层把两个图层叠在一起。

因为不需要在 Flutter 线程和 Android 线程之间反复拷贝 GPU 纹理数据,那种因为线程同步导致的掉帧(Jank)被彻底消除了。

# 三、实战:如何在你的项目中开启 HCPP

目前 HCPP 还是个“可选配置”特性。想要体验,你的设备必须满足:Android 14 (API 34) 及以上、支持 Vulkan、并且开启了 Impeller 引擎。

# 1、配置 AndroidManifest.xml

首先,你需要在 android/app/src/main/AndroidManifest.xml 的 application 节点下手动开启这个开关:

<application ...>
    <meta-data
        android:name="io.flutter.embedding.android.EnableHcpp"
        android:value="true" />

    <activity ...>
        ...
    </activity>
</application>

# 2、Dart 层集成

在 Dart 端,你需要使用 PlatformViewLink 配合 AndroidViewSurface 来实现:

class AndroidNativeTextHcpp extends StatelessWidget {
  final String text;
  const AndroidNativeTextHcpp({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    const String viewType = 'custom-native-text';
    final Map<String, dynamic> creationParams = <String, dynamic>{'text': text};

    return PlatformViewLink(
      viewType: viewType,
      surfaceFactory: (context, controller) {
        return AndroidViewSurface(
          controller: controller as AndroidViewController,
          gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
          hitTestBehavior: PlatformViewHitTestBehavior.opaque,
        );
      },
      onCreatePlatformView: (params) {
        return PlatformViewsService.initHybridAndroidView(
            id: params.id,
            viewType: viewType,
            layoutDirection: TextDirection.ltr,
            creationParams: creationParams,
            creationParamsCodec: const StandardMessageCodec(),
            onFocus: () => params.onFocusChanged(true),
          )
          ..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
          ..create();
      },
    );
  }
}

# 3、原生端实现(Kotlin)

你还需要在 MainActivity.kt 中注册你的原生视图工厂:

class MainActivity : FlutterActivity(){
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        flutterEngine
            .platformViewsController
            .registry
            .registerViewFactory("custom-native-text", NativeTextViewFactory())
    }
}

# 4、运行测试

由于这玩意儿对硬件有要求,建议直接连真机测试,并使用 profile 模式查看性能表现。注意,一定要加上 --enable-hcpp 参数:

flutter run --profile --enable-hcpp

# 四、最后

HCPP 的设计非常聪明的一点是它的退路机制。如果用户用的是旧设备(比如 Android 12)或者不支持 Vulkan,Flutter 引擎会自动回退到 TLHC 模式。作为开发者,你只需要写一套代码,剩下的性能优化由 Flutter 自动完成。

HCPP 的出现标志着 Flutter 在 Android 平台上的成熟度又上了一个台阶。如果你正在处理复杂的地图、视频或文档查看功能,是时候关注这个新特性了。

如果你觉得这篇内容对你有帮助,欢迎点个赞,关注我获取更多 Flutter 实战干货。

# 资料参考

  • Flutter 官方文档: Hosting native Android views (opens new window)

  • Android 开发者指南: Surface API Documentation (opens new window)

#Dart#Flutter#Platform View#Virtual Display#Hybrid Composition#HCPP#SurfaceTexture#SurfaceControl#SurfaceFlinger#Impeller#Vulkan
上次更新: 2026/07/26, 08:42:07
别在 Flutter 的 main() 里乱锁屏幕方向,小心 iPad 分屏功能被你搞没了
给 Flutter 插件加上 Swift Package Manager 支持

← 别在 Flutter 的 main() 里乱锁屏幕方向,小心 iPad 分屏功能被你搞没了 给 Flutter 插件加上 Swift Package Manager 支持→

最近更新
01
给 Flutter 插件加上 Swift Package Manager 支持
07-26
02
别在 Flutter 的 main() 里乱锁屏幕方向,小心 iPad 分屏功能被你搞没了
07-24
03
别再盲目复制了:彻底搞懂 CORS 的本质与那些“神坑”
07-23
更多文章>
Theme by Vdoing | Copyright © 2020-2026 FSA全栈行动
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×