如何在 Flutter 中拉伸图像以适合整个背景(100% 高度 x 100% 宽度)? [英] How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter?

问题描述

我的图像与设备屏幕的纵横比不匹配.我想拉伸图像以使其完全填满屏幕，并且不想裁剪图像的任何部分.

I have an image that doesn't match the aspect ratio of my device's screen. I want to stretch the image so that it fully fills the screen, and I don't want to crop any part of the image.

CSS 有百分比的概念，所以我可以将高度和宽度设置为 100%.但是 Flutter 好像没有这个概念，而且只是硬编码高度和宽度是不好的，所以我被卡住了.

CSS has the concept of percentages, so I could just set height and width to 100%. But it doesn't seem like Flutter has that concept, and it's bad to just hard code the height and width, so I'm stuck.

这是我所拥有的(我正在使用堆栈，因为我在图像的前景中有一些东西):

Here's what I have (I'm using a Stack since I have something in the foreground of the image):

Widget background = new Container(
  height: // Not sure what to put here!
  width: // Not sure what to put here!
  child: new Image.asset(
    asset.background,
    fit: BoxFit.fill, // I thought this would fill up my Container but it doesn't
  ),
);

return new Stack(
  children: <Widget>[
    background,
    foreground,
  ],
);

推荐答案

要使 Image 填充其父级，只需将其包装到 FittedBox 中:

To make an Image fill its parent, simply wrap it into a FittedBox:

FittedBox(
  child: Image.asset('foo.png'),
  fit: BoxFit.fill,
)

FittedBox 此处将拉伸图像以填充空间.(请注意，此功能曾经由 BoxFit.fill 提供，但 API 同时发生了变化，使得 BoxFit 不再提供此功能.FittedBox> 应该作为替代品使用，不需要对构造函数参数进行更改.)

FittedBox here will stretch the image to fill the space. (Note that this functionality used to be provided by BoxFit.fill, but the API has meanwhile changed such that BoxFit no longer provides this functionality. FittedBox should work as a drop-in replacement, no changes need to be made to the constructor arguments.)

或者，对于复杂的装饰，您可以使用 Container 而不是 Image – 并使用 decoration/foregroundDecoration 字段.

Alternatively, for complex decorations you can use a Container instead of an Image – and use decoration/foregroundDecoration fields.

要使 Container 成为其父项，它应该:

To make the Container will its parent, it should either:

• 没有孩子
• 有 alignment 属性不是 null

• have no child
• have alignment property not null

这是一个将两个图像和一个 Text 组合在一个 Container 中的示例，同时采用其父级的 100% 宽度/高度:

Here's an example that combines two images and a Text in a single Container, while taking 100% width/height of its parent:

Container(
  foregroundDecoration: const BoxDecoration(
    image: DecorationImage(
        image: NetworkImage(
            'https://p6.storage.canalblog.com/69/50/922142/85510911_o.png'),
        fit: BoxFit.fill),
  ),
  decoration: const BoxDecoration(
    image: DecorationImage(
        alignment: Alignment(-.2, 0),
        image: NetworkImage(
            'http://www.naturerights.com/blog/wp-content/uploads/2017/12/Taranaki-NR-post-1170x550.png'),
        fit: BoxFit.cover),
  ),
  alignment: Alignment.bottomCenter,
  padding: EdgeInsets.only(bottom: 20),
  child: Text(
    "Hello World",
    style: Theme.of(context)
        .textTheme
        .display1
        .copyWith(color: Colors.white),
  ),
),

这篇关于如何在 Flutter 中拉伸图像以适合整个背景(100% 高度 x 100% 宽度)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！