时间戳

首页 > 解决方案 > 如何根据父元素调整图像大小？

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

问题描述

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

现在 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

标签： dartflutter

解决方案

它不是 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 上的 Flutter 社区https://medium.com/flutter-community以及我们每周三在https://medium.com/flutter-community/flutterqanda/home上的实时帮助会议

推荐阅读