Flutter Layout过程分析

发表于 分类于

layout的基本流程：

  1. parent将约束信息传递给child，来限制child的最大宽高；
  2. child根据根据约束信息确认自己的大小(如果儿子还有孙子，则儿子继续执行所有1~4的布局流程)；
  3. parent根据child返回的大小来确定自己的大小；
  4. parent确定child的位置偏移，并将位置偏移记录在child.parentData.offset中；

Center的布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//RenderPositionedBox
  void performLayout() {
    final BoxConstraints constraints = this.constraints;
    //当需要缩放，或者约束的宽度为无限大时 shrinkWrapWidth=true
    final bool shrinkWrapWidth = _widthFactor != null || constraints.maxWidth == double.infinity;
    //同上
    final bool shrinkWrapHeight = _heightFactor != null || constraints.maxHeight == double.infinity;

    if (child != null) {
      //child根据parent的约束进行布局，layout最终还是会调用performLayout来计算布局
      child!.layout(constraints.loosen(), parentUsesSize: true);
      //
      size = constraints.constrain(Size(
        shrinkWrapWidth ? child!.size.width * (_widthFactor ?? 1.0) : double.infinity,
        shrinkWrapHeight ? child!.size.height * (_heightFactor ?? 1.0) : double.infinity,
      ));
      alignChild();
    } else {
      //如果没有child，则返回一个无限大的布局大小
      size = constraints.constrain(Size(
        shrinkWrapWidth ? 0.0 : double.infinity,
        shrinkWrapHeight ? 0.0 : double.infinity,
      ));
    }
  }