1.Flutter svga 播放及替换
2.Flutter 1.20 下的层源 Hybrid Composition 深度解析
3.超级全面的Flutter性能优化实践
4.Flutter UI系统

Flutter svga 播放及替换

       SVGA格式动画在安卓、iOS和Web平台均兼容，层源简化动画开发，层源避免复杂canvas优化。层源在Flutter中使用SVGA，层源需关注版本兼容性。层源银河ngrid源码

       引入SVGA插件，层源通过pub.dev获取最新版本，层源解决Dart 3x版本不支持问题。层源

       展示SVGA动画，层源实现动态替换内部元素。层源传统方法无法同步文字效果，层源SVGA提供图层替换功能。层源

       SVGA插件集成完成，层源使用controller.videoItem?层源.dynamicItem.setImage方法实现动态替换。

       理解SVGA资源，动态替换文字需生成对应切图。预览网站辅助，确认图层名称、规格，确保替换位置准确。

       使用ui.PictureRecorder()生成文字流，借助canvas绘制。通过setImage方法更新，形成预期效果。

       SVGA播放与动态替换代码整合，确保动画与文字同步。项目开发中遇到SVGA相关问题，resin 源码解读以上方案或可提供帮助。

       欢迎分享更多实现方式或高级写法，共同探讨SVGA在Flutter应用中的优化策略。

Flutter 1. 下的 Hybrid Composition 深度解析

       在探索Flutter 1.版本下的Hybrid Composition模式时，我们需对比其与旧版本VirtualDisplay的实现差异，深入理解其原理及应用。

       在以往的开发中，Android平台上为了集成如WebView、MapView等能力，采用了VirtualDisplays的实现方式。然而，随着1.版本的更新，官方开始尝试推出类似iOSPlatformView的新模式——Hybrid Composition。本文将通过三部分，对比介绍Hybrid Composition的使用、原理，以及其在1.版本中的特点和实现方式。

       一、旧版本的VirtualDisplay

       在1.版本之前，Flutter通过将AndroidView需要渲染的内容绘制到VirtualDisplays中，然后在VirtualDisplay对应的内存中，通过Surface获取渲染数据。VirtualDisplay类似于一个虚拟显示区域，需要与DisplayManager配合调用，通常在副屏显示或录屏场景下使用。它将虚拟显示区域的内容渲染在一个Surface上。

       如图所示，jmai邮件源码简而言之，原生控件的内容被绘制到内存中，Flutter Engine通过相对应的textureId获取控件的渲染数据并显示。然而，这种实现方式存在触摸事件、文字输入和键盘焦点等问题，这些问题在iOS平台上的实现方式有所不同。

       二、接入Hybrid Composition

       1.版本引入了Hybrid Composition的PlatformView实现，以解决Android平台上的大部分与PlatformView相关的问题，例如华为手机上键盘弹出后Web界面异常消失的情况。实现Hybrid Composition需要使用PlatformViewLink、AndroidViewSurface和PlatformViewsService等对象。开发者需要创建一个dart控制层，并在Android原生层继承PlatformView和PlatformViewFactory。

       通过FlutterEngine的getPlatformViewsController注册NativeViewFactory，同时在AndroidManifest.xml中添加代码启用配置。官方表示在Android 及以上版本，Hybrid Composition性能表现良好，但在以下版本，Flutter界面在屏幕上的显示速度可能会变慢。

       三、Hybrid Composition的特点和实现原理

       Hybrid Composition的关键在于引入FlutterImageView。它并非一般意义的ImageView，而是一个用于混合原生控件图层合成的原生View。FlutterImageView通过实现RenderSurface接口，实现类似FlutterSurfaceView的ios源码解读部分功能。它内部包含ImageReader、Image和Bitmap等类，用于提供Surface、读取Surface数据并绘制。

       FlutterImageView提供了background和overlay两种SurfaceKind，用于在不同场景下显示内容。PlatformViewsController中的createAndroidViewForPlatformView和createVirtualDisplayForPlatformView方法也是Hybrid Composition兼容VirtualDisplay的一种实现方式。

       在Dart层，通过PlatformViewsService触发原生的PlatformViewsChannel的create方法，创建PlatformViewCreationRequest并进行usesHybridComposition的判断。如果为true，则调用createAndroidViewForPlatformView方法。

       在Hybrid Composition模式下，PlatformView通过某种原生控件显示，我们可以通过布局边界观察到。增加额外的原生控件和Dart层的文本显示在同一区域，发现文本可以显示在原生控件之上，说明Hybrid Composition不仅仅是简单地将原生控件放入Flutter中。

       通过Layout Inspector，可以观察到重叠的文本控件通过FlutterImageView层实现渲染。在不同区域显示的多个默认控件共用一个FlutterImageView，而不在同一区域的控件则使用各自的FlutterImageView。使用Hybrid Composition接入的默认PlatformView通常为FlutterMutatorView，用于调整原生控件的位置和Matrix。

       Flutter判断控件是否需要使用FlutterImageView基于Engine在SubmitFrame时的处理。它通过current_frame_view_count对每个画面进行规划，触发CreateSurfaceIfNeeded函数，libevent源码解析进一步创建FlutterImageView。

       在Dart层面，PlatformViewSurface通过PlatformViewRenderBox添加PlatformViewLayer，然后在ui.SceneBuilder中调用Engine添加Layer信息。

       当前Hybrid Composition已在1. stable版本可用，解决了部分问题。其性能和应用情况将随时间验证。Hybrid Composition的细节丰富，本文未能详尽展开，更多实现细节需进一步探索。

       资源推荐：更多关于Hybrid Composition和Flutter开发资源，可参考官方文档、社区教程和论坛讨论。

超级全面的Flutter性能优化实践

       在介绍Flutter性能优化实践的过程中，主要从几个方面进行了深入探讨。首先，强调了Flutter支持的三种编译模式：Release、Profile和Debug，其中Profile模式提供了对性能分析工具的支持，这对于开发者进行性能检测尤为关键。开启Profile模式的方法较为简单，无论是独立的Flutter工程还是混合应用，都可以通过相应的命令或配置轻松实现。

       接着，介绍了Flutter Inspector和Performance Overlay这两个核心性能分析工具。Flutter Inspector提供了“Select Widget Mode”和“Highlight Repaints”功能，帮助开发者在构建过程中迅速定位布局问题和频繁重绘的区域。Performance Overlay则通过展示GPU与UI线程的执行图表，直观地揭示了应用的渲染和绘制耗时情况，协助开发者识别和优化性能瓶颈。

       在针对渲染问题的定位上，CPU Profiler成为了一个重要的工具。它允许开发者通过手动触发性能采样，进而分析出哪些方法存在耗时操作，从而进行针对性的优化。优化策略包括使用Isolate进行并发处理、避免阻塞操作以及合理使用Future等异步机制。

       布局优化方面，Flutter采用声明式的方式构建UI，通过构建树的层级来实现布局。常规优化包括减少耗时操作、减少Widget层级、尽可能使用const构造器和优化列表的加载机制。深入到光栅化优化时，关注点在于提高渲染效率，通过合理利用Vsync信号和双线程架构，提高应用的响应速度和性能。

       内存优化则是通过const实例化、检测并优化消耗内存的、合理配置ListView的自动保持活动和自动处理机制、将多变图层与不变图层分离以及控制预渲染区域的大小来实现。这些措施有助于减少内存消耗，提高应用的稳定性和流畅性。

       总结而言，Flutter性能优化的核心在于合理利用其提供的工具和机制，通过分析和定位性能瓶颈，采取有效措施进行优化，最终实现高效、流畅的应用体验。无论是通过减少耗时操作、优化布局结构、提高渲染效率还是优化内存管理，都是为了确保应用在不同的设备和环境下都能保持良好的性能表现。

Flutter UI系统

       在探讨 Flutter 的 UI 系统之前，让我们先理解显示屏如何展示图形，这有助于我们理解 UI 系统的设计。显示屏中的每一个物理显示单位都是一个像素点，每一个像素点可以显示多种颜色，通过在不同的像素点上显示不同的颜色，最终构成完整的图像。

       像素是显示图像的基本单位。每一个像素点可以显示出万种颜色，由RGB三基色组成的屏幕，每个基本色（R、G、B）深度扩展至8 bit(位)，即 2 的 次方为 万色。像素点的大小取决于显示器的分辨率，相同面积的不同分辨率显示屏，其像素点大小各不相同。

       DPI（每英寸像素数）是通过将屏幕的横向或纵向像素数除以以英寸为单位的宽度或高度来计算的。更高的DPI意味着每个像素必须更小，以便能够被可用空间容纳，这意味着屏幕会更清晰，可以绘制更高细节级别的内容。

       为了更新显示画面，屏幕是以固定的频率刷新（从 GPU 取数据），例如一部手机屏幕的刷新频率是Hz。在绘制完一帧图像后准备绘制下一帧时，显示器会发出一个垂直同步信号（如 VSync），Hz的屏幕就会在一秒内发出次这样的信号。这个信号主要是用于同步 CPU、GPU 和显示器的协作，通常，计算机系统中，CPU、GPU 和显示器通过特定的方式协作：CPU 将计算好的显示内容提交给 GPU，GPU 渲染后放入帧缓冲区，然后视频控制器按照同步信号从帧缓冲区取帧数据传递给显示器显示。

       由于最终的图形计算和绘制都是由相应的硬件来完成，操作系统通常屏蔽了直接操作硬件的指令。Flutter 通过提供一套 Dart API，然后在底层通过 skia 这种跨平台的绘制库实现了一套代码跨多端的解决方案。Flutter 的框架设计采用 Embedder（操作系统适配层）、Engine（渲染引擎及 Dart VM 层）和 Framework（UI SDK 层）整体三层的划分，每一层的组件定义都有着明确的边界，其向上提供的功能和向下依赖的能力也非常明确。

       Embedder 是操作系统适配层，实现了渲染 Surface 设置，线程设置，以及平台插件等平台相关特性的适配。Engine 层主要包含 Skia、Dart 和 Text，实现了 Flutter 的渲染引擎、文字排版、事件处理和 Dart 运行时等功能。Framework 层则是一个用 Dart 实现的 UI SDK，包含了动画、图形绘制和手势识别等功能。为了在绘制控件等固定样式的图形时提供更直观、更方便的接口，Flutter 还基于这些基础能力，根据 Material 和 Cupertino 两种视觉设计风格封装了一套 UI 组件库。通过 Flutter API，开发者可以直接使用这些组件库，实现多端高度一致的渲染体验且性能接近原生。

       在了解 Flutter UI系统和操作系统交互的原理之后，我们再来看看 Flutter 如何通过 Dart API 来操控画布。在 Flutter 开发中，页面中各界面元素以树的形式组织，即控件树。控件树中的每个控件创建不同类型的渲染对象，组成渲染对象树。但实际上 Flutter 中真正代表屏幕上显示元素的是 Element，Widget 只是描述 Element 的配置数据。UI树其实是由一个个独立的 Element 节点构成。组件最终的布局、渲染都是通过 RenderObject 来完成的，从创建到渲染的大体流程是：根据 Widget 生成 Element，然后创建相应的 RenderObject 并关联 Element.renderObject 属性上，最后再通过 RenderObject 来完成布局排列和绘制。

       Flutter 通过控件树中的每个控件创建不同类型的渲染对象，组成渲染对象树。然后 RenderObject 将所有的图层根据大小、层级、透明度等规则计算出最终的显示效果，将相同的图层归类合并，简化渲染树，提高渲染效率。合成完成后，Flutter 会将几何图层数据交由 Skia 引擎加工成二维图像数据，最终交由 GPU 进行渲染，完成界面的展示。