Flutter - 自定义交错网格视图答案

【问题标题】：Flutter - Custom staggered grid viewFlutter - 自定义交错网格视图
【发布时间】：2021-07-09 10:55:05
【问题描述】：

我正在使用flutter_staggered_grid_view: ^0.3.4 构建一个包含 5 个元素（图块）的菜单，我想根据特定布局显示这些元素，您将在下面找到所需输出的图像和我当前拥有的输出，到目前为止，这是我的代码：

Padding(
    padding: const EdgeInsets.symmetric(horizontal: 14),
    child: StaggeredGridView.countBuilder(
        shrinkWrap: true,
        itemCount: gridItems.length,
        crossAxisSpacing: 2,
        mainAxisSpacing: 2,
        crossAxisCount: 4,
        itemBuilder: (context, index) {
            return GestureDetector(
                child: gridItems[index]);
        },
        staggeredTileBuilder: (index) {
            return StaggeredTile.fit(2);
        }),
),

我得到的最接近的是：

•StaggeredTile.fit(2)

和

•StaggeredTile.count(2, 1)

他们都给出了相同的结果。

这是图片：

【问题讨论】：

另一种解决方案是制作一个 2x2 网格，然后在网格下展开一行并将第 5 个项目放在那里

标签： flutter dart gridview staggered-gridview

【解决方案1】：

这不是你要找的，而是

StaggeredTile.fit(index.isEven ? 2 : 1);

将在两行上均匀显示 5 个图块

【讨论】：

我暂时用它，直到找到我要找的布局。