gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 02:48:45 31 4
gpt4 key购买 nike

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

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com