[英]Flutter Column bottom overflowed by pixels
I'm trying to show an item in a Gridview with the format: Price text -> item image -> title text我正在尝试使用以下格式在 Gridview 中显示一个项目:价格文本 -> 项目图像 -> 标题文本
Im using a column to achieve it and it seems like the tile in GridView has a fixed height, so when the image gets too big it will lead to bottom overflow.我使用一列来实现它,似乎 GridView 中的 tile 具有固定高度,因此当图像太大时会导致底部溢出。
So my question is, is there a way to keep the Price and title text and only squeeze the middle image?所以我的问题是,有没有办法保留价格和标题文本而只挤压中间图像? Something similar to android/iOS layout constraints?
类似于 android/iOS 布局约束的东西? Thanks guys.
谢谢你们。
[Update] I have pasted the code snippet as well. [更新] 我也粘贴了代码片段。
There is one more thing I have tried is to set the image with fixed height and width and it works, but that requires me to carefully find a suitable extent which is not really flexible to me.我还尝试过的另一件事是设置具有固定高度和宽度的图像并且它可以工作,但这需要我仔细找到合适的范围,这对我来说并不是很灵活。 And GridTile also does not really give me the layout that I want.
而且 GridTile 也没有真正给我想要的布局。 Is there really no way that I can just squeeze the middle view(image in this case here) with Column?
我真的没有办法用 Column 挤压中间视图(在这种情况下是图像)吗?
@override
Widget build(BuildContext context) {
final imageUrl = doc['main_image']['downloadURL'];
Widget image;
if (imageUrl != null) {
image = Image.network(
imageUrl,
fit: BoxFit.scaleDown,
);
} else {
image = Container(
color: Colors.grey,
);
}
String price = '\$' + doc[FIREBASE_COL_PRICE].toString();
return Card(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerRight,
child: Text(
price,
maxLines: 1,
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: image,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
doc[FIREBASE_COL_NAME],
maxLines: 1,
))
],
));
}
Have you considered using Expanded
widgets?您是否考虑过使用
Expanded
小部件? It should distribute the size of widgets inside the Card
.它应该在
Card
内分配小部件的大小。
GridView builder I used to test我用来测试的 GridView 构建器
GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: List.generate(
20, (index) {
return gridCard(index);
},
),
),
Cards for the GridView. GridView 的卡片。 I've modified the snippet you've provided.
我已经修改了您提供的代码段。
gridCard(int index) {
final imageUrl = "URL";
Widget image;
if (imageUrl != null) {
image = Image.network(
imageUrl,
fit: BoxFit.scaleDown,
);
}
else {
image = Container(
color: Colors.grey,
);
}
String price = '\$1234';
return Card(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Align(
alignment: Alignment.centerRight,
child: Text(
price,
maxLines: 1,
),
),
),
Expanded(
flex: 3,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: image,
),
),
Expanded(
flex: 1,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Some Text $index',
maxLines: 1,
),
),
),
],
),
),
);
}
Demo演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.