Flutter ListView一行三个自动增减

2023-12-06 20:15:23

Flutter 中的 GridView 是一种非常方便的布局控件，它可以轻松地将子组件排列成网格状，并在水平或垂直方向上滚动。在某些情况下，您可能希望 GridView 中的子组件数量能够随着数据的变化而自动增加或减少，这种情况下，您可以使用 GridView.builder 构造函数来创建 GridView。

GridView.builder 构造函数接收一个 builder 参数，该参数是一个函数，它将子组件的索引作为参数，并返回一个子组件。您可以使用 builder 函数来创建任意数量的子组件，并且 GridView 会自动调整其大小以容纳所有子组件。

以下是一个使用 GridView.builder 创建 GridView 的示例：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
)

在这个示例中，我们创建了一个 GridView，它有 3 列，并且子组件的数量由 builder 函数决定。builder 函数将子组件的索引作为参数，并返回一个 Container 组件。Container 组件具有蓝色背景，并在其中心有一个文本组件，显示子组件的索引。

当您运行这个代码时，您会看到一个 GridView，其中包含 3 列子组件，并且子组件的数量会随着数据的变化而自动增加或减少。

您还可以使用 GridView.builder 来创建具有不同大小的子组件的 GridView。以下是一个示例：

GridView.builder(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 200,
  ),
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
)