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 树。

相关推荐
九丝城主7 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
瓜子三百克12 小时前
七、性能优化
flutter·性能优化
恋猫de小郭20 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡1 天前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克1 天前
十、高级概念
flutter
帅次2 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡2 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉2 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1232 天前
FlutterView 源码解析
flutter
Zender Han2 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter