本文主要介紹Flutter佈局中的ListBody、ListView、CustomMultiChildLayout控制元件，詳細介紹了其佈局行為以及使用場景，並對原始碼進行了分析。
1. ListBody
A widget that arranges its children sequentially along a given axis.
1.1 簡介
ListBody是一個不常直接使用的控制元件，一般都會配合ListView或者Column等控制元件使用。ListBody的作用是按給定的軸方向，按照順序排列子節點。
1.2 佈局行為
在主軸上，子節點按照順序進行佈局，在交叉軸上，子節點尺寸會被拉伸，以適應交叉軸的區域。
在主軸上，給予子節點的空間必須是不受限制的（unlimited），使得子節點可以全部被容納，ListBody不會去裁剪或者縮放其子節點。
1.3 繼承關係
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > ListBody
複製程式碼1.4 示例程式碼
Flex(
direction: Axis.vertical,
children: <Widget>[
ListBody(
mainAxis: Axis.vertical,
reverse: false,
children: <Widget>[
Container(color: Colors.red, width: 50.0, height: 50.0,),
Container(color: Colors.yellow, width: 50.0, height: 50.0,),
Container(color: Colors.green, width: 50.0, height: 50.0,),
Container(color: Colors.blue, width: 50.0, height: 50.0,),
Container(color: Colors.black, width: 50.0, height: 50.0,),
],
)],
)
複製程式碼1.5 原始碼解析
建構函式如下：
ListBody({
Key key,
this.mainAxis = Axis.vertical,
this.reverse = false,
List<Widget> children = const <Widget>[],
})
複製程式碼1.5.1 屬性解析
mainAxis：排列的主軸方向。
reverse：是否反向。
1.5.2 原始碼
ListBody的佈局程式碼非常簡單，根據主軸的方向，對子節點依次排布。
當向右的時候，佈局程式碼如下，向下的程式碼類似：
double mainAxisExtent = 0.0;
RenderBox child = firstChild;
switch (axisDirection) {
case AxisDirection.right:
final BoxConstraints innerConstraints = new BoxConstraints.tightFor(height: constraints.maxHeight);
while (child != null) {
child.layout(innerConstraints, parentUsesSize: true);
final ListBodyParentData childParentData = child.parentData;
childParentData.offset = new Offset(mainAxisExtent, 0.0);
mainAxisExtent += child.size.width;
assert(child.parentData == childParentData);
child = childParentData.nextSibling;
}
size = constraints.constrain(new Size(mainAxisExtent, constraints.maxHeight));
break;
}
複製程式碼當向左的時候，佈局程式碼如下，向上的程式碼類似：
double mainAxisExtent = 0.0;
RenderBox child = firstChild;
case AxisDirection.left:
final BoxConstraints innerConstraints = new BoxConstraints.tightFor(height: constraints.maxHeight);
while (child != null) {
child.layout(innerConstraints, parentUsesSize: true);
final ListBodyParentData childParentData = child.parentData;
mainAxisExtent += child.size.width;
assert(child.parentData == childParentData);
child = childParentData.nextSibling;
}
double position = 0.0;
child = firstChild;
while (child != null) {
final ListBodyParentData childParentData = child.parentData;
position += child.size.width;
childParentData.offset = new Offset(mainAxisExtent - position, 0.0);
assert(child.parentData == childParentData);
child = childParentData.nextSibling;
}
size = constraints.constrain(new Size(mainAxisExtent, constraints.maxHeight));
break;
複製程式碼向右或者向下的時候，佈局程式碼很簡單，依次去排列。當向左或者向上的時候，首先會去計算主軸所佔的空間，然後再去計算每個節點的位置。
1.6 使用場景
筆者自己從未使用過這個控制元件，也想象不出場景，大家瞭解下有這麼一個佈局控制元件即可。
2. ListView
A scrollable, linear list of widgets.
2.1 簡介
ListView是一個非常常用的控制元件，涉及到資料列表展示的，一般情況下都會選用該控制元件。ListView跟GridView相似，基本上是一個slivers裡面只包含一個SliverList的CustomScrollView。
2.2 佈局行為
ListView在主軸方向可以滾動，在交叉軸方向，則是填滿ListView。
2.3 繼承關係
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > ScrollView > BoxScrollView > ListView
複製程式碼看繼承關係可知，這是一個組合控制元件。ListView跟GridView類似，都是繼承自BoxScrollView。
2.4 示例程式碼
ListView(
shrinkWrap: true,
padding: EdgeInsets.all(20.0),
children: <Widget>[
Text('I\'m dedicating every day to you'),
Text('Domestic life was never quite my style'),
Text('When you smile, you knock me out, I fall apart'),
Text('And I thought I was so smart'),
],
)
ListView.builder(
itemCount: 1000,
itemBuilder: (context, index) {
return ListTile(
title: Text("$index"),
);
},
)
複製程式碼兩個示例都是官方文件上的例子，第一個展示四行文字，第二個展示1000個item。
2.5 原始碼解析
建構函式如下：
ListView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
})
複製程式碼同時也提供瞭如下額外的三種構造方法，方便開發者使用。
ListView.builder
ListView.separated
ListView.custom
複製程式碼2.5.1 屬性解析
ListView大部分屬性同GridView，想了解的讀者可以看一下之前所寫的GridView相關的文章。這裡只介紹一個屬性
itemExtent：ListView在滾動方向上每個item所佔的高度值。
2.5.2 原始碼
@override
Widget buildChildLayout(BuildContext context) {
if (itemExtent != null) {
return new SliverFixedExtentList(
delegate: childrenDelegate,
itemExtent: itemExtent,
);
}
return new SliverList(delegate: childrenDelegate);
}
複製程式碼ListView標準構造佈局程式碼如上所示，底層是用到的SliverList去實現的。ListView是一個slivers裡面只包含一個SliverList的CustomScrollView。原始碼這塊兒可以參考GridView，在此不做更多的說明。
2.6 使用場景
ListView使用場景太多了，一般涉及到列表展示的，一般都會選擇ListView。
但是需要注意一點，ListView的標準建構函式適用於數目比較少的場景，如果數目比較多的話，最好使用ListView.builder。
ListView的標準建構函式會將所有item一次性建立，而ListView.builder會建立滾動到螢幕上顯示的item。
3. CustomMultiChildLayout
A widget that uses a delegate to size and position multiple children.
3.1 簡介
之前單節點佈局控制元件中介紹過一個類似的控制元件--CustomSingleChildLayout，都是通過delegate去實現自定義佈局，只不過這次是多節點的自定義佈局的控制元件，通過提供的delegate，可以實現控制節點的位置以及尺寸。
3.2 佈局行為
CustomMultiChildLayout提供的delegate可以控制子節點的佈局，具體在如下幾點：
- 可以決定每個子節點的佈局約束條件；
- 可以決定每個子節點的位置；
- 可以決定自身的尺寸，但是自身的自身必須不能依賴子節點的尺寸。
可以看到，跟CustomSingleChildLayout的delegate提供的作用類似，只不過CustomMultiChildLayout的稍微會複雜點。
3.3 繼承關係
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > CustomMultiChildLayout
複製程式碼3.4 示例程式碼
class TestLayoutDelegate extends MultiChildLayoutDelegate {
TestLayoutDelegate();
static const String title = 'title';
static const String description = 'description';
@override
void performLayout(Size size) {
final BoxConstraints constraints =
new BoxConstraints(maxWidth: size.width);
final Size titleSize = layoutChild(title, constraints);
positionChild(title, new Offset(0.0, 0.0));
final double descriptionY = titleSize.height;
layoutChild(description, constraints);
positionChild(description, new Offset(0.0, descriptionY));
}
@override
bool shouldRelayout(TestLayoutDelegate oldDelegate) => false;
}
Container(
width: 200.0,
height: 100.0,
color: Colors.yellow,
child: CustomMultiChildLayout(
delegate: TestLayoutDelegate(),
children: <Widget>[
LayoutId(
id: TestLayoutDelegate.title,
child: new Text("This is title",
style: TextStyle(fontSize: 20.0, color: Colors.black)),
),
LayoutId(
id: TestLayoutDelegate.description,
child: new Text("This is description",
style: TextStyle(fontSize: 14.0, color: Colors.red)),
),
],
),
)
複製程式碼上面的TestLayoutDelegate作用很簡單，對子節點進行尺寸以及位置調整。可以看到，每一個子節點必須用一個LayoutId控制元件包裹起來，在delegate中可以對不同id的控制元件進行調整。
3.5 原始碼解析
建構函式如下：
CustomMultiChildLayout({
Key key,
@required this.delegate,
List<Widget> children = const <Widget>[],
})
複製程式碼3.5.1 屬性解析
delegate：對子節點進行尺寸以及位置調整的delegate。
3.5.2 原始碼
@override
void performLayout() {
size = _getSize(constraints);
delegate._callPerformLayout(size, firstChild);
}
複製程式碼CustomMultiChildLayout的佈局程式碼很簡單，呼叫delegate中的佈局函式進行相關的操作，本身做的處理很少，在這裡不做過多的解釋。
3.6 使用場景
一些比較複雜的佈局場景可以使用，但是有很多可替代的控制元件，使用起來也沒有這麼麻煩，大家還是按照自己熟練程度選擇使用。
4. 後話
筆者建了一個Flutter學習相關的專案，Github地址，裡面包含了筆者寫的關於Flutter學習相關的一些文章，會定期更新，也會上傳一些學習Demo，歡迎大家關注。