Flutter从ListBody、ListView到CustomMultiChildLayout 的布局理解和实践

2023-09-24 11:31:17

在Flutter中，布局是构建用户界面的重要组成部分。Flutter提供了丰富多样的布局组件，其中ListBody、ListView和CustomMultiChildLayout是常用的布局组件，它们分别适用于不同的场景。在这篇文章中，我们将深入解析这三个布局组件，探索各自特点和应用场景，并通过实例和代码演示帮助您掌握Flutter布局精髓，打造美观大方的应用界面。

1. ListBody

ListBody是一个不常直接使用的控件，一般都会配合ListView或者Column等控件使用。ListBody的作用是按给定的轴方向，按照顺序排列子节点。

在主轴上，子节点按照顺序进行布局，在交叉轴上，子节点尺寸会被拉伸，以适应交叉轴的区域。

在主轴方向上，ListBody可以是垂直方向的，也可以是水平方向的。在交叉轴方向上，ListBody总是会占据整个空间。

2. ListView

ListView是一个常用的布局组件，它可以显示一系列滚动项目。ListView可以是垂直方向的，也可以是水平方向的。

ListView的子节点可以是任何类型的控件，但是一般来说，子节点都是ListTile或其他类型的列表项。

ListView提供了多种属性来控制列表的外观和行为，例如：

itemCount：列表中项目数量
itemBuilder：用于构建列表中每个项目的函数
separatorBuilder：用于构建列表中项目之间的分隔符的函数
scrollDirection：列表的滚动方向
reverse：是否反向排列列表中的项目

3. CustomMultiChildLayout

CustomMultiChildLayout是一个高级布局组件，它允许您创建自定义布局。CustomMultiChildLayout可以用于创建各种各样的布局，例如网格布局、流布局和瀑布流布局。

CustomMultiChildLayout的子节点可以是任何类型的控件。CustomMultiChildLayout通过一个名为delegate的属性来指定布局规则。

delegate属性是一个CustomMultiChildLayoutDelegate对象，它定义了布局规则。CustomMultiChildLayoutDelegate对象需要实现两个方法：

layoutChild：用于指定子节点的布局位置
paint：用于绘制子节点

4. 应用场景

ListBody、ListView和CustomMultiChildLayout都有各自的应用场景。

ListBody一般用于创建简单的列表布局，例如联系人列表或任务列表。
ListView一般用于创建具有滚动功能的列表布局，例如新闻列表或产品列表。
CustomMultiChildLayout一般用于创建自定义布局，例如网格布局、流布局和瀑布流布局。

5. 实例和代码演示

为了更好地理解这三个布局组件，我们来看几个实例和代码演示。

5.1 ListBody实例

class ListBodyDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListBody(
      children: <Widget>[
        Text('Item 1'),
        Text('Item 2'),
        Text('Item 3'),
      ],
    );
  }
}

这个实例创建一个简单的ListBody布局，它包含三个文本项目。

5.2 ListView实例

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text('Item 1'),
        ),
        ListTile(
          title: Text('Item 2'),
        ),
        ListTile(
          title: Text('Item 3'),
        ),
      ],
    );
  }
}

这个实例创建一个简单的ListView布局，它包含三个ListTile项目。

5.3 CustomMultiChildLayout实例

class CustomMultiChildLayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(
      delegate: MyCustomMultiChildLayoutDelegate(),
      children: <Widget>[
        Text('Item 1'),
        Text('Item 2'),
        Text('Item 3'),
      ],
    );
  }
}

class MyCustomMultiChildLayoutDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    // 布局规则
  }

  @override
  bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) {
    return true;
  }
}