如何根据 Flutter 中的宽度调整 GridView 的 crossAxisCount？

Question

在 Flutter 中根据宽度调整 GridView 的列数 (crossAxisCount) 的最佳做法是什么？

也许我可以通过引用 HTML:

来更好地解释预期的行为

我创建了 6 个框（例如 DIV），每个框的宽度为 200 像素（高度相同）。
(a) 如果围绕这些框的元素的宽度为 400 像素，它会自动显示每行 2 个框，共 3 行。
(b) 如果围绕这些框的元素的宽度为 700 像素，它会自动在 2 行中每行显示 3 个框。

Answer 1

我这样做如下。你可以试试..

  int getItemCountPerRow(BuildContext context) {
    double minTileWidth = 200; //in your case
    double availableWidth = MediaQuery.of(context).size.width;
    
    int i = availableWidth ~/ minTileWidth;
    return i;

  }

Answer 2

使用环绕。它可以将尽可能多的渲染框放入一行，然后换行到下一行。（以前是评论，但看起来像答案！）

如何根据 Flutter 中的宽度调整 GridView 的 crossAxisCount？

How to adapt crossAxisCount of GridView based on its width in Flutter?

layout

gridview

responsive-design

flutter