flutter - gridview flutter 中的项目之间的空间

标签 flutter dart flutter-layout

我有一个包含 6 个项目的网格 View (带有图像和文本的卡片)。我希望这 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;
}

我拥有的,

what I have

我想要的是,

what I want

最佳答案

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

我用过:

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

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

enter image description here

关于flutter - gridview flutter 中的项目之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57636185/

相关文章:

android - Flutter:为什么我收到错误 "Route builders must never return null"?

flutter - CocoaPods 在 ios 目录中找不到 pod "FBSDKLoginKit"的兼容版本

Flutter 检查 Uint8List 是否有效 Image

flutter - Flutter 中的 Widgets Library 错误捕获的异常

flutter - Youtube 登录 Api OAuth 2.0 flutter

ios - 在 iOS 模拟器上启动 Flutter 应用程序时出错 : "Error retrieving thread information: (ipc/send) invalid destination port"

flutter - ListTile中具有图像和标签的Flutter左对齐列将不会垂直扩展并裁剪图像

dart - 将 sass 与 angular2dart 结合使用

dart - 如何使用 SingleChildScrollView 使 Stack 布局可滚动?

flutter - 如何在Flutter中实现模糊背景Bottom Modal Sheet?