Flutter 界面渲染流程

Flutter 界面渲染流程_第1张图片

由图可见,整个 Flutter 界面渲染是从GPU开始,「垂直串行vsync」进行依次渲染,直至将「图层树Layer Tree」展示出来。

那么,途径的几个阶段到底是怎么样呢?

  • Animate:标记改变控件状态的动画(Tick animations to change widget state)
  • Build: 当组件状态发生变化时,重构控件还记得之前通过setState()改变控件状态吗(Rebuild widgets to account for state changes)
  • Layout:更新要渲染控件的尺寸和位置(Update size and position of render objects)
  • Paint:记录要展示的混合视图层(Record display lists for composited layers)

你可能感兴趣的:(Flutter 界面渲染流程)