有什么办法可以在 Flutter 中使用 colspan 和 GridView.builder 吗？

Question

我正在使用 GridView.builder 并寻找一种方法来为特定的孩子添加 colspan 以占据整个宽度。 在下面的示例中，我有一个 2 列的 GridView，其中每一列代表一个产品，但是每当用户到达列表的末尾时，我想显示一个加载指示器，在本例中它显示在第一列左边。我希望

Center

小部件占用 2 列空间，如

colspan=2

并在中心显示加载指示器。

GridView.builder(
  itemCount: products.length + 1,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
    childAspectRatio: MediaQuery.of(context).size.width /
                          (MediaQuery.of(context).size.height / 1.8),
    ),
  itemBuilder: (BuildContext context, int index) {
    if (index >= products.length) {
       return const Center(child: CircularProgressIndicator());
    }

    return ProductListItem(product: products[index]);
  },
),

Answer 1

我在这里找到了 2 个解决方案：

1，用

CustomScrollView

和

SliverList

和

SliverGrid

一起使用。
参考：https://www.youtube.com/watch?v=ORiTTaVY6mM

2、使用插件

flutter_staggered_grid_view

.
参考：https://pub.dev/packages/flutter_staggered_grid_view