Flutter学习 - 布局原理篇

前言

这篇博客主要探讨Flutter布局的相关原理，分为两个大部分，单child容器的布局和多child容器布局。

布局基本法则

一个Widget的布局主要有四个步骤

• 当前Widget从父Widget获取到约束
• 当前Widget向子级Widget传递约束，子级通过约束确定自身大小
• 当前Widget综合子级Widget大小和自身大小确定子级Widget位置
• 当前Widget将尺寸信息传递给父Widget，完成闭环

单child容器

案例分析

比如Center组件，我们按照基本法则进行分析

1. Center拿到父Widget的约束，同时确定自己的宽高为最大可取宽高，也就是填充满父Widget
2. Center告诉子Widget可以取任意宽高，子Widget根据约束得到尺寸，并告知Center
3. Center根据子Widget和自身尺寸确定子Widget位置，也就是居中
4. Center将自身尺寸信息传递给父Widget

使用CustomSingleChildLayout模拟Center

单child容器中有一个特殊的容器CustomSingleChildLayout，可以用来自定义布局，通过它我们可以更清晰的感受布局流程。

首先定义一个继承自SingleChildLayoutDelegate的类并且实现四个方法

getSize

此方法用于获取自身的大小，方法会将父Widget的约束传递下来，也就是对应第一步

Size getSize(BoxConstraints constraints) {
  print("get size: $constraints");
  return constraints.biggest;
}

这里取的是constraints.biggest，也就是填充满父Widget

getConstraintsForChild

为子Widget生成约束，这里minWidth和minHeight都设置为0， 表示允许子Widget在父Widget的尺寸范围内可以取任意大小

BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
  final relaxConstraint = BoxConstraints(
      minWidth: 0,
      minHeight: 0,
      maxWidth: constraints.maxWidth,
      maxHeight: constraints.maxHeight);
  return relaxConstraint;
}

getPositionForChild

这个方法告知了我们当前Widget的尺寸和子Widget的尺寸，通过这两个尺寸可以很容易得计算出居中的位置

Offset getPositionForChild(Size size, Size childSize) {
  return Offset((size.width - childSize.width) * 0.5,
      (size.height - childSize.height) * 0.5);
}

综合在一起

class CustomCenterDelegate extends SingleChildLayoutDelegate {
  final double xFactor;
  final double yFactor;
  CustomCenterDelegate({this.xFactor = 0, this.yFactor = 0});

  // 自己的大小
  Size getSize(BoxConstraints constraints) {
    print("get size: $constraints");
    return constraints.biggest;
  }

  // 子widgte的约束
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    final relaxConstraint = BoxConstraints(
        minWidth: 0,
        minHeight: 0,
        maxWidth: constraints.maxWidth,
        maxHeight: constraints.maxHeight);
    print("getConstraintsForChild: ${relaxConstraint}}");
    return relaxConstraint;
  }

  // 子widgte的位置
  Offset getPositionForChild(Size size, Size childSize) {
    print("getPositionForChild");
    return Offset((size.width - childSize.width) * (xFactor + 1) * 0.5,
        (size.height - childSize.height) * (1 + yFactor) * 0.5);
  }

  // 是否需要重绘
  bool shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate) {
    return false;
  }
}

其中有一个shouldRelayout表示是否需要重新布局。由于Center就是居中，没有调整的参数，所以不需要在delegate改变时重新布局，这里就返回false。如果是类似于Align的布局，需要在alignment改变时重新布局，这里就需要判断alignment是否改变了。最后简单的封装一下，就可以和Center一样使用了。

class CustomCenter extends StatelessWidget {
  final Widget? child;
  const CustomAlign(
      {super.key, this.child});

  @override
  Widget build(BuildContext context) {
    return CustomSingleChildLayout(
      delegate: CustomCenterDelegate(),
      child: child,
    );
  }
}

更进一步，源码分析

进一步分析源码，可以发现CustomSingleChildLayout主要依赖于RenderCustomSingleChildLayoutBox

@override
RenderCustomSingleChildLayoutBox createRenderObject(BuildContext context) {
  return RenderCustomSingleChildLayoutBox(delegate: delegate);
}

@override
void updateRenderObject(BuildContext context, RenderCustomSingleChildLayoutBox renderObject) {
  renderObject.delegate = delegate;
}

RenderCustomSingleChildLayoutBox中的核心则是performLayout，performLayout的代码简单明了

@override
void performLayout() {
  // 当前Widget从父Widget获取到约束，确定自身大小
  size = _getSize(constraints);
  if (child != null) {
    // 当前Widget向子级Widget传递约束
    final BoxConstraints childConstraints = delegate.getConstraintsForChild(constraints);
    assert(childConstraints.debugAssertIsValid(isAppliedConstraint: true));
    // 子级通过约束确定自身大小
    child!.layout(childConstraints, parentUsesSize: !childConstraints.isTight);
    final BoxParentData childParentData = child!.parentData! as BoxParentData;
    // 当前Widget综合子级Widget大小和自身大小确定子级Widget位置
    childParentData.offset = delegate.getPositionForChild(size, childConstraints.isTight ? childConstraints.smallest : child!.size);
  }
}

多child容器

案例分析

多child的布局会复杂很多，比如Row组件，他的布局过程如下

1. 将所有flex为0的 子Widgets（比如非Expanded）布局，使用的约束为主轴（mainAxis）不限制，交叉轴（crossAxis）使用传入的交叉轴约束
2. 将剩余的主轴空间按照flex不为0的Widgets比例分割，比如三个flex为1的Widget，主轴方向上各得到1/3
3. flex不为0的Widgets使用分到的主轴长度和传入的交叉轴约束进行布局
4. Row的高度取子Widget最高
5. Row的宽度和mainAxisSize有关，如果是max，则取父Widget的最大宽，min则取子Widgets宽度之和
6. 根据mainAxisAlignment和crossAxisAlignment进行子Widgets位置计算

按照基本布局法则做映射的话

• 当前Widget从父Widget获取到约束 => 使用了父Widget的交叉轴约束
• 当前Widget向子级Widget传递约束，子级通过约束确定自身大小 => 1,2,3步总的来说就是给不同子Widget分配不同约束，从而计算子Widget尺寸
• 当前Widget综合子级Widget大小和自身大小确定子级Widget位置 => 4，5，6通过子Widget反算Row宽高，从而进一步决定子Widget位置
• 当前Widget将尺寸信息传递给父Widget，完成闭环 => Row的最终大小会被传递给父Widget做上层的布局

Row源码分析

接下来我们对照Row的源码来进一步感受布局的过程，Row继承自Flex，Flex中真正进行布局的是RenderFlex类的performLayout方法

@override
  void performLayout() {
    ...
    // 计算子Widgets的尺寸，包含1，2，3三个步骤
    final _LayoutSizes sizes = _computeSizes(
      layoutChild: ChildLayoutHelper.layoutChild,
      constraints: constraints,
    );
    ...

    // 根据计算的尺寸设置子Widget位置
    // Position elements
    double childMainPosition = flipMainAxis ? actualSize - leadingSpace : leadingSpace;
    RenderBox? child = firstChild;
    while (child != null) {
      final FlexParentData childParentData = child.parentData! as FlexParentData;
      final double childCrossPosition;
      switch (_crossAxisAlignment) {
        case CrossAxisAlignment.start:
        case CrossAxisAlignment.end:
          childCrossPosition = _startIsTopLeft(flipAxis(direction), textDirection, verticalDirection)
                               == (_crossAxisAlignment == CrossAxisAlignment.start)
                             ? 0.0
                             : crossSize - _getCrossSize(child.size);
        case CrossAxisAlignment.center:
          childCrossPosition = crossSize / 2.0 - _getCrossSize(child.size) / 2.0;
        case CrossAxisAlignment.stretch:
          childCrossPosition = 0.0;
        case CrossAxisAlignment.baseline:
          if (_direction == Axis.horizontal) {
            assert(textBaseline != null);
            final double? distance = child.getDistanceToBaseline(textBaseline!, onlyReal: true);
            if (distance != null) {
              childCrossPosition = maxBaselineDistance - distance;
            } else {
              childCrossPosition = 0.0;
            }
          } else {
            childCrossPosition = 0.0;
          }
      }
      if (flipMainAxis) {
        childMainPosition -= _getMainSize(child.size);
      }
      switch (_direction) {
        case Axis.horizontal:
          childParentData.offset = Offset(childMainPosition, childCrossPosition);
        case Axis.vertical:
          childParentData.offset = Offset(childCrossPosition, childMainPosition);
      }
      if (flipMainAxis) {
        childMainPosition -= betweenSpace;
      } else {
        childMainPosition += _getMainSize(child.size) + betweenSpace;
      }
      child = childParentData.nextSibling;
    }
  }

再来分析下_computeSizes的实现 第一步就是计算flex为0的子Widgets尺寸

double crossSize = 0.0;
double allocatedSize = 0.0; // Sum of the sizes of the non-flexible children.
RenderBox? child = firstChild;
RenderBox? lastFlexChild;
while (child != null) {
  final FlexParentData childParentData = child.parentData! as FlexParentData;
  final int flex = _getFlex(child);
  if (flex > 0) {
    totalFlex += flex;
    lastFlexChild = child;
  } else {
    final BoxConstraints innerConstraints;
    if (crossAxisAlignment == CrossAxisAlignment.stretch) {
      switch (_direction) {
        case Axis.horizontal:
          innerConstraints = BoxConstraints.tightFor(height: constraints.maxHeight);
        case Axis.vertical:
          innerConstraints = BoxConstraints.tightFor(width: constraints.maxWidth);
      }
    } else {
      switch (_direction) {
        case Axis.horizontal:
          innerConstraints = BoxConstraints(maxHeight: constraints.maxHeight);
        case Axis.vertical:
          innerConstraints = BoxConstraints(maxWidth: constraints.maxWidth);
      }
    }
    final Size childSize = layoutChild(child, innerConstraints);
    allocatedSize += _getMainSize(childSize);
    crossSize = math.max(crossSize, _getCrossSize(childSize));
  }
  assert(child.parentData == childParentData);
  child = childParentData.nextSibling;
}

可以看到如果是flex大于0，则统计flex到totalFlex中。对于flex为0的Widget则只针对cross方向构造约束进行布局。如果cross对齐是stretch模式，则使用tight约束保证cross方向撑满

if (crossAxisAlignment == CrossAxisAlignment.stretch) {
      switch (_direction) {
        case Axis.horizontal:
          innerConstraints = BoxConstraints.tightFor(height: constraints.maxHeight);
        case Axis.vertical:
          innerConstraints = BoxConstraints.tightFor(width: constraints.maxWidth);
      }
    } else {
      switch (_direction) {
        case Axis.horizontal:
          innerConstraints = BoxConstraints(maxHeight: constraints.maxHeight);
        case Axis.vertical:
          innerConstraints = BoxConstraints(maxWidth: constraints.maxWidth);
      }
    }

第二步开始计算flex大于0的子Widgets尺寸

// Distribute free space to flexible children.
final double freeSpace = math.max(0.0, (canFlex ? maxMainSize : 0.0) - allocatedSize);
double allocatedFlexSpace = 0.0;
// totalFlex大于0表示有flex不为0的子Widget
if (totalFlex > 0) {
  final double spacePerFlex = canFlex ? (freeSpace / totalFlex) : double.nan;
  child = firstChild;
  while (child != null) {
    final int flex = _getFlex(child);
    if (flex > 0) {
      // 计算出这个子Widget在主轴可被分配的最大尺寸
      final double maxChildExtent = canFlex ? (child == lastFlexChild ? (freeSpace - allocatedFlexSpace) : spacePerFlex * flex) : double.infinity;
      late final double minChildExtent;
      // 针对FlexFit分配不同约束，这就是Expanded和Flexible的区别，Expanded采用FlexFit.tight模式，Flexible则是FlexFit.loose
      switch (_getFit(child)) {
        case FlexFit.tight:
          assert(maxChildExtent < double.infinity);
          minChildExtent = maxChildExtent;
        case FlexFit.loose:
          minChildExtent = 0.0;
      }
      // 这块和flex为0基本一致，为子Widget构建约束，计算尺寸
      final BoxConstraints innerConstraints;
      if (crossAxisAlignment == CrossAxisAlignment.stretch) {
        switch (_direction) {
          case Axis.horizontal:
            innerConstraints = BoxConstraints(
              minWidth: minChildExtent,
              maxWidth: maxChildExtent,
              minHeight: constraints.maxHeight,
              maxHeight: constraints.maxHeight,
            );
          case Axis.vertical:
            innerConstraints = BoxConstraints(
              minWidth: constraints.maxWidth,
              maxWidth: constraints.maxWidth,
              minHeight: minChildExtent,
              maxHeight: maxChildExtent,
            );
        }
      } else {
        switch (_direction) {
          case Axis.horizontal:
            innerConstraints = BoxConstraints(
              minWidth: minChildExtent,
              maxWidth: maxChildExtent,
              maxHeight: constraints.maxHeight,
            );
          case Axis.vertical:
            innerConstraints = BoxConstraints(
              maxWidth: constraints.maxWidth,
              minHeight: minChildExtent,
              maxHeight: maxChildExtent,
            );
        }
      }
      final Size childSize = layoutChild(child, innerConstraints);
      final double childMainSize = _getMainSize(childSize);
      assert(childMainSize <= maxChildExtent);
      allocatedSize += childMainSize;
      allocatedFlexSpace += maxChildExtent;
      crossSize = math.max(crossSize, _getCrossSize(childSize));
    }
    final FlexParentData childParentData = child.parentData! as FlexParentData;
    child = childParentData.nextSibling;
  }
}

最后一步，通过计算出来的子Widget尺寸，计算Row的尺寸，这里主要就是判断mainAxisSize，看需要最大值还是真实的子Widget宽度和。

final double idealSize = canFlex && mainAxisSize == MainAxisSize.max ? maxMainSize : allocatedSize;

CustomMultiChildLayout

最后再介绍一个用于自定义多child布局的Widget，和单child类似，需要实现一个delegate

class CustomRowDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    
  }

  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) {
    
  }
}

方法很简单，就2个，这里需要注意的是，和上面介绍的Row布局不同，这里能够布局的尺寸已经固定了，子Widget无法影响CustomMultiChildLayout的尺寸，CustomMultiChildLayout的尺寸就是performLayout传递的Size。

比如我们想要实现一个横向自动均分子Widget的容器，可以这么写

@override
void performLayout(Size size) {
  if (keys != null) {
    // 对横向的空间进行均分
    final childWidth = size.width / keys!.length;
    var offsetX = 0.0;
    for (final String key in keys!) {
      // 横向构造严格约束，纵向构造宽松约束，从而让子Widget横向使用均分的尺寸，纵向使用自己的尺寸
      final constraits = BoxConstraints(minWidth: childWidth, maxWidth: childWidth, minHeight: 0, maxHeight: size.height);
      final childSize = layoutChild(key, constraits);
      // 对于纵向让子Widget居中
      positionChild(key, Offset(offsetX, (size.height - childSize.height) * 0.5));
      offsetX += childSize.width;
    }
  }
}

CustomMultiChildLayout规定每个子Widget必须都是LayoutId

(id: "1", child: Container(height: 60, color: Colors.yellow,),),

在布局子Widget时以它的id作为凭证

final childSize = layoutChild(key, constraits);

最后使用这个自定义的Widget

class CustomRow extends StatelessWidget {
  final List<Widget>? children;
  final List<String>? keys;
  const CustomRow(
      {super.key, this.children, this.keys});

  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(
      delegate: CustomRowDelegate(keys: keys),
      children: children ?? [],
    );
  }
}

...

CustomRow(
  keys: const ["1", "2", "3"],
  children: [
    LayoutId(id: "1", child: Container(height: 60, color: Colors.yellow,),),
    LayoutId(id: "2", child: Container(height: 80, color: Colors.red,),),
    LayoutId(id: "3", child: Container(height: 40, color: Colors.green,),),
  ],
),

总结

通过对布局原理的了解，在布局的时候可以更加清晰的预测UI的效果，每当遇到一个新布局Widget，就可以通过四个步骤去梳理他的布局过程，通过文档和开源的代码，就可以很深入的掌握它的特性了。