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，就可以通过四个步骤去梳理他的布局过程，通过文档和开源的代码，就可以很深入的掌握它的特性了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345

推荐阅读更多精彩内容