Flutter 中轻松实现单个屏幕多个列表，尽享布局自由！

2024-01-12 17:18:11

Flutter 中多个列表：自由组合，打造精彩界面

在 Flutter 的世界中，列表是展示数据的有力工具。但有时，您可能需要在单个屏幕上展示多个列表。别担心，Flutter 为您准备了多种布局选择，助您轻松实现这一目标！

网格列表：整齐排列，一目了然

网格列表将数据以网格形式排列，非常适合展示大量产品。您可以使用 GridView.builder 组件创建网格列表，它支持固定交叉轴计数，让您自定义网格的列数和间距。

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
  ),
  itemBuilder: (context, index) {
    return ProductItem(product: products[index]);
  },
)

水平列表：横向滑动，尽享流畅

水平列表将数据横向排列，适用于展示较少数量的数据。ListView.builder 组件可以轻松创建水平列表，只需将滚动方向设置为水平即可。

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemBuilder: (context, index) {
    return ProductItem(product: products[index]);
  },
)

垂直列表：经典布局，简洁明了

垂直列表是最常见的列表布局，将数据纵向排列。ListView.builder 组件同样可以创建垂直列表，只需省略滚动方向即可。

ListView.builder(
  itemBuilder: (context, index) {
    return ProductItem(product: products[index]);
  },
)

组合列表：创意无限，随心搭配

Flutter 的强大之处在于，它允许您将不同列表布局组合在一起，创造出更加复杂和美观的界面。例如，您可以将网格列表与水平列表相结合，或者将垂直列表与网格列表相结合。

Column(
  children: [
    GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),
      itemBuilder: (context, index) {
        return ProductItem(product: products[index]);
      },
    ),
    ListView.builder(
      itemBuilder: (context, index) {
        return ProductItem(product: products[index]);
      },
    ),
  ],
)