Flutter 源码学习pt5, painting

预备知识

开始分析Flutter Sdk层的绘制流程之前,回顾一下计算机图形学的基础知识。

基础知识

  • 屏幕是二维的,最终展示的像素点,也可以认为是屏幕最终渲染的产物是图像
  • 图形指由点、线、面等几何元素构成的形状或图案。图形可以是二维的,也可以是三维的。
  • 图像由图形组成,对于照片而言,每个像素点可以看做一个图形
  • 绘制,在绘制中,类比现实中的作画,产出一个图形分别需要三个基础元素,调色板画笔画布。另一个概念,叫Blend(混合)表示同一块画布上颜色如何混合

绘制线路(典型路径)

Flutter 是众多跨平台方案的一种,其中,Skia早于Flutter 实现了跨平台图形图像绘制,OpenGL则为图形跨平台。所以跨平台本身比不是新鲜词了,本质上是一种封装, 当任意层有多个实现且相对稳定时,跨平台的统一层就会出现,特别像分久必合, 螺旋发展。

Flutter painting

上述基础知识和绘制流程,我们可以明确Flutter在目前整个绘制链条当中的位置,在skia等高级图形图像的基础上,为应用开发提供更便捷的能力。明确了定位,我们再来看flutter sdk 中的painting。

Binding

Binding是Flutter和其他组件沟通的接口,但PaintingBinding很特殊,它更像是一个绘制的资源管家, 提供了imageCache缓存图像,同时混入了ServicesBinding, 实现了handleMemoryPressure释放缓存的图像,监听handleSystemMessage中的fontsChange, 通知RenderObjectCustomPainter等进行重绘。

dart 复制代码
mixin PaintingBinding on BindingBase, ServicesBinding {
  @override
  void initInstances() {
    super.initInstances();
    _instance = this;
    _imageCache = createImageCache();
    shaderWarmUp?.execute();
  }
}

我们回头看一下,这painting包下的文件,alignment, border, box_decoration, clip, color 具象化的stadium_border, star_border, text_painter, 这些文件都表明是为了辅助我们绘制。因此,painting 并没有和其他层交互。具体的绘制实现是在sky_engine, 由引擎进行绘制。

所以 Flutter SDK 层只是为我们提供了方便的SDK,具体的绘制并不在这里,engine才是最终负责绘制,这里的painting是配置,也就是我们常说的三棵树中的 widget 树。

相关推荐
BG10 小时前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng14 小时前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭14 小时前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯14 小时前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan17 小时前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓18 小时前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭2 天前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter