如何制作一个单元格大小变化的响应式GridView()？

Question

我想创建一个响应式

GridView()

，但我发现的几乎所有内容都讨论了实现此目的的方法，其中涉及调整网格行和列中的单元格数量。这不是我想做的；我正在使用

SliverGridDelegateWithFixedCrossAxisCount()

。

如何制作一个具有响应能力的

GridView()

小部件，具有

• 固定的列和行排列。随着视口宽度和高度的变化，我希望单元格大小发生变化（而不是行和列的排列），并且
• 出现正方形的单元格，即

  childAspectRatio

  为 1？

我的代码如下所示：

return GridView.builder(
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        childAspectRatio: 1,
      ),
      itemBuilder: (context, index) {
        return Container(
          height: cellSize,
          decoration: BoxDecoration(
            border: Border.all(
              color: Theme.of(context).primaryColorLight,
            ),
            color: Colors.white,
          ),
          child: Tile(index: index),
        );
      },
      padding: const EdgeInsets.fromLTRB(36, 20, 36, 20),
      itemCount: 30,
    );

Tile()

是一个自定义小部件，但它是一个

Container()

。并且

cellSize

执行

MediaQuery.of(context)

来确定视图的高度或宽度是否较小，并选择适合的尺寸。

Answer 1

默认的 childAspectRatio 为 1，您可以从此更改项目大小。

   childAspectRatio: itemWidth/itemHeight,