Flutter學(xué)習(xí) - 布局原理篇

前言

這篇博客主要探討Flutter布局的相關(guān)原理，分為兩個(gè)大部分，單child容器的布局和多child容器布局。

布局基本法則

一個(gè)Widget的布局主要有四個(gè)步驟

  • 當(dāng)前Widget從父Widget獲取到約束
  • 當(dāng)前Widget向子級(jí)Widget傳遞約束，子級(jí)通過約束確定自身大小
  • 當(dāng)前Widget綜合子級(jí)Widget大小和自身大小確定子級(jí)Widget位置
  • 當(dāng)前Widget將尺寸信息傳遞給父Widget，完成閉環(huán)

單child容器

案例分析

比如Center組件，我們按照基本法則進(jìn)行分析

  1. Center拿到父Widget的約束，同時(shí)確定自己的寬高為最大可取寬高，也就是填充滿父Widget
  2. Center告訴子Widget可以取任意寬高，子Widget根據(jù)約束得到尺寸，并告知Center
  3. Center根據(jù)子Widget和自身尺寸確定子Widget位置，也就是居中
  4. Center將自身尺寸信息傳遞給父Widget

使用CustomSingleChildLayout模擬Center

單child容器中有一個(gè)特殊的容器CustomSingleChildLayout，可以用來自定義布局，通過它我們可以更清晰的感受布局流程。

首先定義一個(gè)繼承自SingleChildLayoutDelegate的類并且實(shí)現(xiàn)四個(gè)方法

getSize

此方法用于獲取自身的大小，方法會(huì)將父Widget的約束傳遞下來，也就是對(duì)應(yīng)第一步

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

這里取的是constraints.biggest，也就是填充滿父Widget

getConstraintsForChild

為子Widget生成約束，這里minWidth和minHeight都設(shè)置為0， 表示允許子Widget在父Widget的尺寸范圍內(nèi)可以取任意大小

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

getPositionForChild

這個(gè)方法告知了我們當(dāng)前Widget的尺寸和子Widget的尺寸，通過這兩個(gè)尺寸可以很容易得計(jì)算出居中的位置

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;
  }
}

其中有一個(gè)shouldRelayout表示是否需要重新布局。由于Center就是居中，沒有調(diào)整的參數(shù)，所以不需要在delegate改變時(shí)重新布局，這里就返回false。如果是類似于Align的布局，需要在alignment改變時(shí)重新布局，這里就需要判斷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,
    );
  }
}

更進(jìn)一步，源碼分析

進(jìn)一步分析源碼，可以發(fā)現(xiàn)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() {
  // 當(dāng)前Widget從父Widget獲取到約束，確定自身大小
  size = _getSize(constraints);
  if (child != null) {
    // 當(dāng)前Widget向子級(jí)Widget傳遞約束
    final BoxConstraints childConstraints = delegate.getConstraintsForChild(constraints);
    assert(childConstraints.debugAssertIsValid(isAppliedConstraint: true));
    // 子級(jí)通過約束確定自身大小
    child!.layout(childConstraints, parentUsesSize: !childConstraints.isTight);
    final BoxParentData childParentData = child!.parentData! as BoxParentData;
    // 當(dāng)前Widget綜合子級(jí)Widget大小和自身大小確定子級(jí)Widget位置
    childParentData.offset = delegate.getPositionForChild(size, childConstraints.isTight ? childConstraints.smallest : child!.size);
  }
}

多child容器

案例分析

多child的布局會(huì)復(fù)雜很多，比如Row組件，他的布局過程如下

  1. 將所有flex為0的 子Widgets（比如非Expanded）布局，使用的約束為主軸（mainAxis）不限制，交叉軸（crossAxis）使用傳入的交叉軸約束
  2. 將剩余的主軸空間按照flex不為0的Widgets比例分割，比如三個(gè)flex為1的Widget，主軸方向上各得到1/3
  3. flex不為0的Widgets使用分到的主軸長度和傳入的交叉軸約束進(jìn)行布局
  4. Row的高度取子Widget最高
  5. Row的寬度和mainAxisSize有關(guān)，如果是max，則取父Widget的最大寬，min則取子Widgets寬度之和
  6. 根據(jù)mainAxisAlignment和crossAxisAlignment進(jìn)行子Widgets位置計(jì)算

按照基本布局法則做映射的話

  • 當(dāng)前Widget從父Widget獲取到約束 => 使用了父Widget的交叉軸約束
  • 當(dāng)前Widget向子級(jí)Widget傳遞約束，子級(jí)通過約束確定自身大小 => 1,2,3步總的來說就是給不同子Widget分配不同約束，從而計(jì)算子Widget尺寸
  • 當(dāng)前Widget綜合子級(jí)Widget大小和自身大小確定子級(jí)Widget位置 => 4，5，6通過子Widget反算Row寬高，從而進(jìn)一步?jīng)Q定子Widget位置
  • 當(dāng)前Widget將尺寸信息傳遞給父Widget，完成閉環(huán) => Row的最終大小會(huì)被傳遞給父Widget做上層的布局

Row源碼分析

接下來我們對(duì)照Row的源碼來進(jìn)一步感受布局的過程，Row繼承自Flex，F(xiàn)lex中真正進(jìn)行布局的是RenderFlex類的performLayout方法

@override
  void performLayout() {
    ...
    // 計(jì)算子Widgets的尺寸，包含1，2，3三個(gè)步驟
    final _LayoutSizes sizes = _computeSizes(
      layoutChild: ChildLayoutHelper.layoutChild,
      constraints: constraints,
    );
    ...

    // 根據(jù)計(jì)算的尺寸設(shè)置子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的實(shí)現(xiàn)
第一步就是計(jì)算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，則統(tǒng)計(jì)flex到totalFlex中。對(duì)于flex為0的Widget則只針對(duì)cross方向構(gòu)造約束進(jìn)行布局。如果cross對(duì)齊是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);
      }
    }

第二步開始計(jì)算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) {
      // 計(jì)算出這個(gè)子Widget在主軸可被分配的最大尺寸
      final double maxChildExtent = canFlex ? (child == lastFlexChild ? (freeSpace - allocatedFlexSpace) : spacePerFlex * flex) : double.infinity;
      late final double minChildExtent;
      // 針對(duì)FlexFit分配不同約束，這就是Expanded和Flexible的區(qū)別，Expanded采用FlexFit.tight模式，F(xiàn)lexible則是FlexFit.loose
      switch (_getFit(child)) {
        case FlexFit.tight:
          assert(maxChildExtent < double.infinity);
          minChildExtent = maxChildExtent;
        case FlexFit.loose:
          minChildExtent = 0.0;
      }
      // 這塊和flex為0基本一致，為子Widget構(gòu)建約束，計(jì)算尺寸
      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;
  }
}

最后一步，通過計(jì)算出來的子Widget尺寸，計(jì)算Row的尺寸，這里主要就是判斷mainAxisSize，看需要最大值還是真實(shí)的子Widget寬度和。

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

CustomMultiChildLayout

最后再介紹一個(gè)用于自定義多child布局的Widget，和單child類似，需要實(shí)現(xiàn)一個(gè)delegate

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

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

方法很簡單，就2個(gè)，這里需要注意的是，和上面介紹的Row布局不同，這里能夠布局的尺寸已經(jīng)固定了，子Widget無法影響CustomMultiChildLayout的尺寸，CustomMultiChildLayout的尺寸就是performLayout傳遞的Size。

比如我們想要實(shí)現(xiàn)一個(gè)橫向自動(dòng)均分子Widget的容器，可以這么寫

@override
void performLayout(Size size) {
  if (keys != null) {
    // 對(duì)橫向的空間進(jìn)行均分
    final childWidth = size.width / keys!.length;
    var offsetX = 0.0;
    for (final String key in keys!) {
      // 橫向構(gòu)造嚴(yán)格約束，縱向構(gòu)造寬松約束，從而讓子Widget橫向使用均分的尺寸，縱向使用自己的尺寸
      final constraits = BoxConstraints(minWidth: childWidth, maxWidth: childWidth, minHeight: 0, maxHeight: size.height);
      final childSize = layoutChild(key, constraits);
      // 對(duì)于縱向讓子Widget居中
      positionChild(key, Offset(offsetX, (size.height - childSize.height) * 0.5));
      offsetX += childSize.width;
    }
  }
}

CustomMultiChildLayout規(guī)定每個(gè)子Widget必須都是LayoutId

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

在布局子Widget時(shí)以它的id作為憑證

final childSize = layoutChild(key, constraits);

最后使用這個(gè)自定義的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,),),
  ],
),

總結(jié)

通過對(duì)布局原理的了解，在布局的時(shí)候可以更加清晰的預(yù)測(cè)UI的效果，每當(dāng)遇到一個(gè)新布局Widget，就可以通過四個(gè)步驟去梳理他的布局過程，通過文檔和開源的代碼，就可以很深入的掌握它的特性了。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容