Flutter 基础 - 视图布局（二）List Widget

2023-12-15 14:52:26

在 Flutter 中，List Widget 是用来显示列表数据的常见组件。它提供了多种不同的列表类型，包括 ListView、GridView 和 CustomScrollView，可以满足不同的列表展示需求。本文将详细介绍这些列表组件的使用方法和特性，帮助您在 Flutter 中轻松构建列表布局。

ListView

ListView 是最常用的列表组件，它可以显示一列垂直排列的项目。ListView 的使用方法很简单，只需将要显示的数据列表传递给它的 children 参数即可。例如，以下代码显示了一个包含 10 个项目的 ListView：

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
    ...
    Text('Item 10'),
  ],
)

GridView

GridView 与 ListView 类似，但它可以显示网格状排列的项目。GridView 的使用方法也与 ListView 类似，只需将要显示的数据列表传递给它的 children 参数即可。例如，以下代码显示了一个包含 10 个项目的 GridView：

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
    ...
    Text('Item 10'),
  ],
)

CustomScrollView

CustomScrollView 是一个更灵活的列表组件，它允许您自定义列表的滚动行为和布局。CustomScrollView 的使用方法与 ListView 和 GridView 不同，它需要您使用 SliverChildBuilderDelegate 来构建列表的内容。例如，以下代码显示了一个包含 10 个项目的 CustomScrollView：

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Text('Item $index'),
        childCount: 10,
      ),
    ),
  ],
)