Question

我想创建一个Image小部件，其大小调整为其父级的高度，但随后会根据显示图像的宽高比溢出父级的宽度。我已尝试FittedBox以及LayoutBuilder和SizedOverflowBox的组合，但没有运气。到目前为止，我只能在宽度和高度上将图像的大小调整为父级。

是否有一些小部件组合会给我这种行为？

Answer 1

我结束了使用OverflowBox小部件找到一种非常直接的方法：

new Container(
  child: new OverflowBox(
    minWidth: 0.0, 
    minHeight: 0.0, 
    maxWidth: double.infinity, 
    child: new Image(
      image: new AssetImage('assets/images/bubbles.jpg'), 
      fit: BoxFit.cover)) 
),

当为maxWidth提供double.INFINITY而没有为maxHeight提供值时，OverflowBox将图像调整为容器的高度以及根据给定高度显示完整图像所需的宽度。

Answer 2

尝试一下：

new Container(
  decoration: new BoxDecoration(
    image: new DecorationImage(
      image: new AssetImage(
        'assets/images/custom_birthday_card.jpg',
      ),
      fit: BoxFit.cover,
    ),
  ),
);

如果您在此之后仍有问题，请在此处查看我在Github上的卡片示例： https://github.com/sabdar18/Flutter-Birthday-Card/blob/master/lib/main.dart

将图像小部件调整为父级高度但溢出宽度

2 个答案: