【问题标题】:Size Image widget to parent height but overflow width将图像小部件调整为父高度但溢出宽度
【发布时间】:2018-09-10 00:04:26
【问题描述】:

我想创建一个图像小部件,它的大小与其父级的高度相同,但随后会根据显示图像的纵横比溢出父级的宽度。我试过FittedBoxLayoutBuilderSizedOverflowBox 的组合,但没有运气。到目前为止,我只能让图像的宽度和高度都适合父级。

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

【问题讨论】:

    标签: flutter


    【解决方案1】:

    试试这个:

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

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

    【讨论】:

    • 据我所知,这种方法与我尝试过的其他方法一样。它将图像(在本例中为 DecorationImage)的大小调整为容器的大小,并将绘制的图像居中并垂直填充,同时水平剪切。我试图让图像的水平尺寸大于父容器,这样它就不会被剪裁并且可以呈现完整的图像。
    • 我能够使用 OverflowBox 让我的场景正常工作
    • 谢谢,这帮助我实现了我想要实现的目标:)
    【解决方案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 会将图像的大小调整为容器的高度以及根据给定高度显示完整图像所需的宽度。

    【讨论】:

    • @Gunter:我想在图像上使用 InteractiveViewer,但是我们如何将 InteractiveViewer 的最大宽度和最大高度限制为父宽度/高度。 InteractiveViewer 缩放不应大于外部容器小部件的宽度和高度。我们如何才能完成这项任务。请建议。谢谢。
    猜你喜欢
    • 1970-01-01
    • 2013-04-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-19
    • 2012-08-14
    • 2013-04-28
    • 2014-02-12
    相关资源
    最近更新 更多