Flutter 佈局（十）- ListBody、ListView、CustomMultiChildLayout詳解

本文主要介紹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，歡迎你們關注。

5. 參考

1. ListBody class
2. ListView class
3. CustomMultiChildLayout class
4. Working with long lists