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

相关推荐
技术蔡蔡4 小时前
Flutter和Firebae简单的聊天应用
flutter·全栈·firebase
小蜜蜂嗡嗡19 小时前
flutter封装vlcplayer的控制器
前端·javascript·flutter
你听得到111 天前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
哲科软件2 天前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风2 天前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem2 天前
基于Flutter的web登录设计
前端·flutter
coder_pig2 天前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘2 天前
Android 16开发者全解读
android·flutter·客户端
Jalor2 天前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao2 天前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios