dart - Flutter 根据屏幕尺寸自动调整网格卡的大小

Question

我正在使用下面的代码在网格中显示卡片，它工作正常。

return new GridView.count(
  primary: false,
  padding: const EdgeInsets.all(1.5),
  crossAxisCount: 2,
  childAspectRatio: 0.80,
  mainAxisSpacing: 1.0,
  crossAxisSpacing: 1.0,
  children: _loadCategories(), //new Cards()
  shrinkWrap: true,
);

目前横向和纵向显示如下。

但我希望所有网格/卡片(在本例中为 6 个)完全填满视口(viewport)。所有 6 张卡片都应该在视口(viewport)中可见。目前，最后 2 张卡片在纵向模式下位于视口(viewport)下方，4 张卡片在横向模式下位于下方。

如何让所有的卡片根据屏幕尺寸调整形状？

下面只是好奇:

是否可以使网格响应而不是将固定项目排成一行？

EIDT 1:

我使用下面的卡片 6 次来生成下面的内容。

  List<Widget> _loadCategories() {
    List<Widget> categoryCells = [];
    List<CategoryItem> categories = new CategoryManager().categories();

    for (CategoryItem category in categories) {
      categoryCells.add(getStructuredGridCell(category));
    }

    return categoryCells;
  }

  Card getStructuredGridCell(CategoryItem item) {
    return new Card(
      elevation: 2.0,
      color: item.color,
      child: new InkWell(
        highlightColor: Colors.white.withAlpha(30),
        splashColor: Colors.white.withAlpha(20),
        child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            verticalDirection: VerticalDirection.down,
            children: <Widget>[
              new Image(image: new AssetImage(item.iconUri)),
              new Center(
                child: new Text(item.title),
              )
            ]),
        onTap: () {
          _tappedCategoryCell(item.routeName);
        },
      ),
    );
  }

Answer 1

我希望这能完成工作。

int count;

if (MediaQuery.of(context).orientation == Orientation.landscape)
  count = 4;

else
  count = 2;


return new GridView.count(
  primary: false,
  padding: const EdgeInsets.all(1.5),
  crossAxisCount: count,
  childAspectRatio: 0.80,
  mainAxisSpacing: 1.0,
  crossAxisSpacing: 1.0,
  children: _loadCategories(), //new Cards()
  shrinkWrap: true,
);

然后再做剩下的。