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

Question

我想创建一个图像小部件，其大小与其父级的高度相同，但随后会根据显示图像的纵横比溢出父级的宽度。我尝试了 FittedBox 以及 LayoutBuilder 和 SizedOverflowBox 的组合，但没有成功。到目前为止，我只能让图像的宽度和高度都适合父级。

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

Answer 1

试一试：

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

如果在此之后您仍然有问题，请查看我在 GitHub here 上的卡片示例。

Answer 2

我最终找到了一种使用 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 将图像调整为容器的高度以及根据给定高度显示完整图像所需的宽度。

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

Size Image widget to parent height but overflow width

flutter