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

我想实现的目标是

我想要Grid一张卡片，每张卡片内有一张图片，底部有ListTile

Answer 1

使用mediaquery

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

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

Answer 2

不是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的更多帮助，请务必在中等https://medium.com/flutter-community上查看Flutter社区，并在每周三的https://medium.com/flutter-community/flutterqanda/home上查看我们的实时帮助会话

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

2 个答案: