Flutter 佈局（七）- Row、Column詳解

時間 2019-11-18

標籤 flutter 佈局 row column 詳解简体版

原文原文鏈接

本文主要介紹Flutter佈局中的Row、Column控件，詳細介紹了其佈局行爲以及使用場景，並對源碼進行了分析。html

1. Row

A widget that displays its children in a horizontal array.git

1.1 簡介

在Flutter中很是常見的一個多子節點控件，將children排列成一行。估計是借鑑了Web中Flex佈局，因此不少屬性和表現，都跟其類似。可是注意一點，自身不帶滾動屬性，若是超出了一行，在debug下面則會顯示溢出的提示。github

1.2 佈局行爲

Row的佈局有六個步驟，這種佈局表現來自Flex（Row和Column的父類）：web

首先按照不受限制的主軸（main axis）約束條件，對flex爲null或者爲0的child進行佈局，而後按照交叉軸（ cross axis）的約束，對child進行調整；
按照不爲空的flex值，將主軸方向上剩餘的空間分紅相應的幾等分；
對上述步驟flex值不爲空的child，在交叉軸方向進行調整，在主軸方向使用最大約束條件，讓其佔滿步驟2所分得的空間；
Flex交叉軸的範圍取自子節點的最大交叉軸；
主軸Flex的值是由mainAxisSize屬性決定的，其中MainAxisSize能夠取max、min以及具體的value值；
每個child的位置是由mainAxisAlignment以及crossAxisAlignment所決定。

Row的佈局行爲表面上看有這麼多個步驟，其實也還算是簡單，能夠徹底參照web中的Flex佈局，包括主軸、交叉軸等概念。函數

1.3 繼承關係

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Row

Row以及Column都是Flex的子類，它們的具體實現也都是由Flex完成，只是參數不一樣。源碼分析

1.4 示例代碼

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
        padding: EdgeInsets.all(5.0),
      ),
      flex: 1,
    ),
    Expanded(
      child: Container(
        color: Colors.yellow,
        padding: EdgeInsets.all(5.0),
      ),
      flex: 2,
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
        padding: EdgeInsets.all(5.0),
      ),
      flex: 1,
    ),
  ],
)

一個很簡單的例子，使用Expanded控件，將一行的寬度分紅四個等分，第1、三個child佔1/4的區域，第二個child佔1/2區域，由flex屬性控制。佈局

1.5 源碼解析

構造函數以下：學習

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children = const <Widget>[],
})

1.5.1 屬性解析

MainAxisAlignment：主軸方向上的對齊方式，會對child的位置起做用，默認是start。flex

其中MainAxisAlignment枚舉值：ui

center：將children放置在主軸的中心；
end：將children放置在主軸的末尾；
spaceAround：將主軸方向上的空白區域均分，使得children之間的空白區域相等，可是首尾child的空白區域爲1/2；
spaceBetween：將主軸方向上的空白區域均分，使得children之間的空白區域相等，首尾child都靠近首尾，沒有間隙；
spaceEvenly：將主軸方向上的空白區域均分，使得children之間的空白區域相等，包括首尾child；
start：將children放置在主軸的起點；

其中spaceAround、spaceBetween以及spaceEvenly的區別，就是對待首尾child的方式。其距離首尾的距離分別是空白區域的1/二、0、1。

MainAxisSize：在主軸方向佔有空間的值，默認是max。

MainAxisSize的取值有兩種：

max：根據傳入的佈局約束條件，最大化主軸方向的可用空間；
min：與max相反，是最小化主軸方向的可用空間；

CrossAxisAlignment：children在交叉軸方向的對齊方式，與MainAxisAlignment略有不一樣。

CrossAxisAlignment枚舉值有以下幾種：

baseline：在交叉軸方向，使得children的baseline對齊；
center：children在交叉軸上居中展現；
end：children在交叉軸上末尾展現；
start：children在交叉軸上起點處展現；
stretch：讓children填滿交叉軸方向；

TextDirection：阿拉伯語系的兼容設置，通常無需處理。

VerticalDirection：定義了children擺放順序，默認是down。

VerticalDirection枚舉值有兩種：

down：從top到bottom進行佈局；
up：從bottom到top進行佈局。

top對應Row以及Column的話，就是左邊和頂部，bottom的話，則是右邊和底部。

TextBaseline：使用的TextBaseline的方式，有兩種，前面已經介紹過。

1.5.2 源碼

Row以及Column的源代碼就一個構造函數，具體的實現所有在它們的父類Flex中。

關於Flex的構造函數

Flex({
  Key key,
  @required this.direction,
  this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize = MainAxisSize.max,
  this.crossAxisAlignment = CrossAxisAlignment.center,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  this.textBaseline,
  List<Widget> children = const <Widget>[],
})

能夠看出，Flex的構造函數就比Row和Column的多了一個參數。Row跟Column的區別，正是這個direction參數的不一樣。當爲Axis.horizontal的時候，則是Row，當爲Axis.vertical的時候，則是Column。

咱們來看下Flex的佈局函數，因爲佈局函數比較多，所以分段來說解：

while (child != null) {
  final FlexParentData childParentData = child.parentData;
  totalChildren++;
  final int flex = _getFlex(child);
  if (flex > 0) {
    totalFlex += childParentData.flex;
    lastFlexChild = child;
  } else {
    BoxConstraints innerConstraints;
    if (crossAxisAlignment == CrossAxisAlignment.stretch) {
      switch (_direction) {
        case Axis.horizontal:
          innerConstraints = new BoxConstraints(minHeight: constraints.maxHeight,
                                                maxHeight: constraints.maxHeight);
          break;
        case Axis.vertical:
          innerConstraints = new BoxConstraints(minWidth: constraints.maxWidth,
                                                maxWidth: constraints.maxWidth);
          break;
      }
    } else {
      switch (_direction) {
        case Axis.horizontal:
          innerConstraints = new BoxConstraints(maxHeight: constraints.maxHeight);
          break;
        case Axis.vertical:
          innerConstraints = new BoxConstraints(maxWidth: constraints.maxWidth);
          break;
      }
    }
    child.layout(innerConstraints, parentUsesSize: true);
    allocatedSize += _getMainSize(child);
    crossSize = math.max(crossSize, _getCrossSize(child));
  }
  child = childParentData.nextSibling;
}

上面這段代碼，我把中間的一些assert以及錯誤信息之類的代碼剔除了，不影響實際的理解。

在佈局的開始，首先會遍歷一遍child，遍歷的做用有兩點：

對於存在flex值的child，計算出flex的和，找到最後一個包含flex值的child。找到這個child，是由於主軸對齊方式，可能會對它的位置作調整，須要找出來；
對於不包含flex的child，根據交叉軸方向的設置，對child進行調整。

final double freeSpace = math.max(0.0, (canFlex ? maxMainSize : 0.0) - allocatedSize);
if (totalFlex > 0 || crossAxisAlignment == CrossAxisAlignment.baseline) {
  final double spacePerFlex = canFlex && totalFlex > 0 ? (freeSpace / totalFlex) : double.nan;
  child = firstChild;
  while (child != null) {
    final int flex = _getFlex(child);
    if (flex > 0) {
      final double maxChildExtent = canFlex ? (child == lastFlexChild ? (freeSpace - allocatedFlexSpace) : spacePerFlex * flex) : double.infinity;
      double minChildExtent;
      switch (_getFit(child)) {
        case FlexFit.tight:
          assert(maxChildExtent < double.infinity);
          minChildExtent = maxChildExtent;
          break;
        case FlexFit.loose:
          minChildExtent = 0.0;
          break;
      }
      BoxConstraints innerConstraints;
      if (crossAxisAlignment == CrossAxisAlignment.stretch) {
        switch (_direction) {
          case Axis.horizontal:
            innerConstraints = new BoxConstraints(minWidth: minChildExtent,
                                                  maxWidth: maxChildExtent,
                                                  minHeight: constraints.maxHeight,
                                                  maxHeight: constraints.maxHeight);
            break;
          case Axis.vertical:
            innerConstraints = new BoxConstraints(minWidth: constraints.maxWidth,
                                                  maxWidth: constraints.maxWidth,
                                                  minHeight: minChildExtent,
                                                  maxHeight: maxChildExtent);
            break;
        }
      } else {
        switch (_direction) {
          case Axis.horizontal:
            innerConstraints = new BoxConstraints(minWidth: minChildExtent,
                                                  maxWidth: maxChildExtent,
                                                  maxHeight: constraints.maxHeight);
            break;
          case Axis.vertical:
            innerConstraints = new BoxConstraints(maxWidth: constraints.maxWidth,
                                                  minHeight: minChildExtent,
                                                  maxHeight: maxChildExtent);
            break;
        }
      }
      child.layout(innerConstraints, parentUsesSize: true);
      final double childSize = _getMainSize(child);
      allocatedSize += childSize;
      allocatedFlexSpace += maxChildExtent;
      crossSize = math.max(crossSize, _getCrossSize(child));
    }
    if (crossAxisAlignment == CrossAxisAlignment.baseline) {
      final double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
      if (distance != null)
        maxBaselineDistance = math.max(maxBaselineDistance, distance);
    }
    final FlexParentData childParentData = child.parentData;
    child = childParentData.nextSibling;
  }
}

上面的代碼段所作的事情也有兩點：

爲包含flex的child分配剩餘的空間

對於每份flex所對應的空間大小，它的計算方式以下：

final double freeSpace = math.max(0.0, (canFlex ? maxMainSize : 0.0) - allocatedSize);
final double spacePerFlex = canFlex && totalFlex > 0 ? (freeSpace / totalFlex) : double.nan;

其中，allocatedSize是不包含flex所佔用的空間。當每一份flex所佔用的空間計算出來後，則根據交叉軸的設置，對包含flex的child進行調整。

計算出baseline值

若是交叉軸的對齊方式爲baseline，則計算出最大的baseline值，將其做爲總體的baseline值。

switch (_mainAxisAlignment) {
  case MainAxisAlignment.start:
    leadingSpace = 0.0;
    betweenSpace = 0.0;
    break;
  case MainAxisAlignment.end:
    leadingSpace = remainingSpace;
    betweenSpace = 0.0;
    break;
  case MainAxisAlignment.center:
    leadingSpace = remainingSpace / 2.0;
    betweenSpace = 0.0;
    break;
  case MainAxisAlignment.spaceBetween:
    leadingSpace = 0.0;
    betweenSpace = totalChildren > 1 ? remainingSpace / (totalChildren - 1) : 0.0;
    break;
  case MainAxisAlignment.spaceAround:
    betweenSpace = totalChildren > 0 ? remainingSpace / totalChildren : 0.0;
    leadingSpace = betweenSpace / 2.0;
    break;
  case MainAxisAlignment.spaceEvenly:
    betweenSpace = totalChildren > 0 ? remainingSpace / (totalChildren + 1) : 0.0;
    leadingSpace = betweenSpace;
    break;
}

而後，就是將child在主軸方向上按照設置的對齊方式，進行位置調整。上面代碼就是計算先後空白區域值的過程，能夠看出spaceBetween、spaceAround以及spaceEvenly的差異。

double childMainPosition = flipMainAxis ? actualSize - leadingSpace : leadingSpace;
child = firstChild;
while (child != null) {
  final FlexParentData childParentData = child.parentData;
  double childCrossPosition;
  switch (_crossAxisAlignment) {
    case CrossAxisAlignment.start:
    case CrossAxisAlignment.end:
      childCrossPosition = _startIsTopLeft(flipAxis(direction), textDirection, verticalDirection)
                           == (_crossAxisAlignment == CrossAxisAlignment.start)
                         ? 0.0
                         : crossSize - _getCrossSize(child);
      break;
    case CrossAxisAlignment.center:
      childCrossPosition = crossSize / 2.0 - _getCrossSize(child) / 2.0;
      break;
    case CrossAxisAlignment.stretch:
      childCrossPosition = 0.0;
      break;
    case CrossAxisAlignment.baseline:
      childCrossPosition = 0.0;
      if (_direction == Axis.horizontal) {
        assert(textBaseline != null);
        final double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
        if (distance != null)
          childCrossPosition = maxBaselineDistance - distance;
      }
      break;
  }
  if (flipMainAxis)
    childMainPosition -= _getMainSize(child);
  switch (_direction) {
    case Axis.horizontal:
      childParentData.offset = new Offset(childMainPosition, childCrossPosition);
      break;
    case Axis.vertical:
      childParentData.offset = new Offset(childCrossPosition, childMainPosition);
      break;
  }
  if (flipMainAxis) {
    childMainPosition -= betweenSpace;
  } else {
    childMainPosition += _getMainSize(child) + betweenSpace;
  }
  child = childParentData.nextSibling;
}

最後，則是根據交叉軸的對齊方式設置，對child進行位置調整，到此，佈局結束。

咱們能夠順一下總體的流程：