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

【问题标题】：How to resize Image according to parent element?如何根据父元素调整图像大小？
【发布时间】：2018-12-06 09:39:51
【问题描述】：

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

现在 Grid 已经自动将自己划分为列和行。

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,
        );
      },
    );

我想要实现的是

我想要 Grid 一张卡片，在每张卡片上都有一张图片，底部有 ListTile

【问题讨论】：

标签： dart flutter

【解决方案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 和 Image Scale type center crop on flutter?

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

【讨论】：

【解决方案2】：

使用媒体查询

如果您希望图像为设备宽度的一半，您可以将其用作：

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

【讨论】：