如何根据父元素调整图像大小

Question

你们是如何根据父元素的高度和宽度来保持图像大小的？从我当前的代码中，我得到了图像溢出错误。我还没有为网格指定任何高度/宽度，我希望它能覆盖整个网格空间，调整大小。

现在，网格已经自动将自己划分为列和行。

GridView.builder(
controller: _scrollController,
scrollDirection: Axis.vertical,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: snapitem.length,
itemBuilder: (context, int index) {
return InkWell(
child: Card(
child: Column(
children: <Widget>[
GridTile(
child: CachedNetworkImage(
imageUrl: snapitem[index].poster.toString(),
placeholder: Center(
child: CircularProgressIndicator(),
),
errorWidget: Icon(Icons.broken_image),
fit: BoxFit.fill,
),
),
ButtonTheme.bar(
child: ListTile(
title: Text(
snapitem[index].title,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
)
],
),
),
splashColor: Colors.deepPurpleAccent,
);
},
);

我想要实现的是

我想要一张网格卡片，每张卡片上面都有一张图片，底部的是ListTile

Answer 1

不是MediaQuery((，它告诉您设备屏幕大小。

第一个问题，如果你没有使用页眉或页脚，为什么要使用GridTile？来自grid_tile.dart:

if (header == null && footer == null)
return child;

所以去掉GridTile，除非你打算添加页眉或页脚。下一个

由于CachedNetworkImage现在是Column的直接子级，因此可以将其包装在Expanded中。这将忽略CachedNetworkImage中的任何大小信息，只将其放入可用空间中。

请参阅https://docs.flutter.io/flutter/widgets/Expanded-class.html和颤振上的图像缩放类型中心裁剪？

有关Flutter的更多帮助，请务必查看Medium上的Flutter社区https://medium.com/flutter-community以及我们每周三在https://medium.com/flutter-community/flutterqanda/home

Answer 2

使用mediaquery

如果你想让你的图像是设备宽度的一半，你可以用这个作为：

width: Mediaquery.of(context).size.width / 2