Flutter 界面渲染流程

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

那么,途径的几个阶段究竟是怎么样呢?ui

  • 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)