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

时间:2018-12-06 09:39:51

标签: dart flutter

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

现在,网格已自动将其自身分为列和行。

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

2 个答案:

答案 0 :(得分:0)

使用mediaquery

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

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

答案 1 :(得分:0)

不是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.htmlImage Scale type center crop on flutter?

要获取有关Flutter的更多帮助,请务必在中等https://medium.com/flutter-community上查看Flutter社区,并在每周三的https://medium.com/flutter-community/flutterqanda/home上查看我们的实时帮助会话