gridview中项目之间的空间颤动答案

【问题标题】：space between items in gridview fluttergridview中项目之间的空间颤动
【发布时间】：2019-12-29 08:42:31
【问题描述】：

我有一个包含 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;
}

我有什么，

我想要的，

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

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

我用过：

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

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

【讨论】：

【解决方案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];
  },
);

【讨论】：