[英]How can I make a Card height extend based on content?
I am creating a Card
which has a header and a grid view of photos.我正在创建一张具有 header 和照片网格视图的
Card
。 Below is the code:下面是代码:
_getImageWidget(Post post, AppConfig config) {
if (post.photoPaths != null && post.photoPaths.length > 0) {
var url = config.imagePathDomain + post.photoPaths[0];
try {
return Expanded(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: false,
children: post.photoPaths.map<Widget>((String path) {
return CachedNetworkImage(
imageUrl: url,
);
}).toList()));
} catch (err) {
return Container();
}
}
return Container();
}
@override
Widget build(BuildContext context) {
var config = AppConfig.of(context);
return BlocBuilder<UserInfoBloc, UserInfo>(builder: (_, userInfo) {
return Container(
width: MediaQuery.of(context).size.width,
child: Card(
child: Column(children: <Widget>[
Row(
children: <Widget>[
IconButton(
iconSize: 30,
icon: roundImage(post.userPicture, Icon(Icons.person)),
onPressed: () {},
),
Text('@${userInfo.username}')
],
),
this._getImageWidget(post, config),
])));
});
}
The header in the Card is a Row
includes a IconButton
and Text
.卡片中的 header 是一个包含
IconButton
和Text
的Row
。 The body of the Card
is a gridview which includes a few photo. Card
的主体是 gridview,其中包括一些照片。
Below is the screenshot when I run the code.下面是我运行代码时的屏幕截图。 You can see that the photo is shown only a half.
您可以看到照片只显示了一半。 And I can scroll vertically on the grid view.
我可以在网格视图上垂直滚动。 The number of photos is dynamic which means there could be many rows of photos in the
GridView
.照片的数量是动态的,这意味着
GridView
中可能有很多行照片。 How can I make the Card
extend based on its children?如何使
Card
于其子级扩展?
Try using a fixed size container and using the BoxFit
property on the container.尝试使用固定大小的容器并使用容器上的
BoxFit
属性。
Something like this:像这样的东西:
new Container(
width: 80.0,
height: 80.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
image: new DecorationImage(
fit: BoxFit.fill,
image: CachedNetworkImageProvider(url),
),
),
),
Edit : Try to remove itemExtent
from ListView.builder
编辑:尝试从
ListView.builder
中删除itemExtent
By simply setting your CachedNetwork
image to use a fit: BoxFit.cover
that will resize to fill the content while preserving ratio (this means you may lose some of its details) or fit: BoxFit.contain
that will try to be as big as possible while containing the entire source (image) within the bounds.通过简单地将您的
CachedNetwork
图像设置为使用fit: BoxFit.cover
将调整大小以填充内容同时保留比例(这意味着您可能会丢失一些细节)或fit: BoxFit.contain
将尝试尽可能大同时包含边界内的整个源(图像)。
If that doesn't help as well (as I'm not seeing the entire tree so I'm not sure about the ancestors of your Card
) you can also replace the return of your BlocBuilder
's child to be a FittedBox
instead of a Container
and apply the same logic for the fit
property, but for the whole card instead.如果这也没有帮助(因为我没有看到整个树,所以我不确定您
Card
的祖先)您还可以将BlocBuilder
的孩子的返回替换为FittedBox
而不是Container
并为fit
属性应用相同的逻辑,但适用于整个卡片。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.