gridview flutter 中的项目之间的空间

Question

我有一个包含 6 个项目的网格视图（带有图像和文本的卡片）。我希望这 6 个项目适合我在屏幕上的大小，但 gridview 通过将 2 个项目从屏幕上跳出来，在项目之间留下所有空间。

我留下一张我想要的和我拥有的照片。

谢谢你。

return MaterialApp(
    home: Scaffold(
        body: Container(
  margin: EdgeInsets.only(top: 0),
  child: Stack(
    alignment: AlignmentDirectional.topCenter,
    children: <Widget>[
      Container(
        height: 200,
        color: Colors.black,
      ),
      Container(
        margin: EdgeInsets.only(top: 200),
        decoration: BoxDecoration(
            image: new DecorationImage(
                image: AssetImage("assets/fondo.png"), fit: BoxFit.fill)),
      ),
      Image.asset("assets/cara_simio_banner.png"),
      Padding(
        padding: EdgeInsets.only(top: 220),
        child: Text(
          "{CodeJaVu}",
          style: TextStyle(
              color: Colors.white,
              fontSize: 25,
              fontWeight: FontWeight.bold),
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: 230),
        child: GridView.count(
          crossAxisCount: 2,
          children: items.map((item) {
            return GestureDetector(
              onTap: () {},
              child: CardItem(item),
            );
          }).toList(),
        ),
      )
    ],
  ),
)));

}

Widget CardItem(Item item) {
return Card(
  margin: EdgeInsets.all(40),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),

    child: 
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            item.image,
            width: 50,
            height: 50,
          ),
          Text(item.name)
        ],
      )
);
}

class Item {
 String _name;
 String _image;

 Item(this._name, this._image);
 String get name => _name;
 set name(String name) => _name = name;

 String get image => _image;
 set image(String image) => _image = image;
}

我拥有的，

我想要的是，

Answer 1

将 childAspectRatio 参数添加到 GridView.cout 构造函数，并更改卡边距。

我用过：

..
GridView.count(
              childAspectRatio: 3/2,

..
Card(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      ..

Answer 2

您还可以使用 mainAxisSpacing 和 crossAxisSpacing，如下所示。

return GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, crossAxisSpacing: 8, mainAxisSpacing: 4),
  padding: EdgeInsets.all(8),
  shrinkWrap: true,
  itemCount: widgetList.length,
  itemBuilder: (context, index) {
    return widgetList[index];
  },
);

Answer 3

只需在 GridView 小部件中添加以下两行：

mainAxisSpacing: 20,
crossAxisSpacing: 20,