如何在Flutter中拉伸图像以适应整个背景(100%高度x 100%宽度)？

Question

我的图像与设备屏幕的宽高比不匹配.我想拉伸图像,使其完全填满屏幕,我不想裁剪图像的任何部分.

CSS具有百分比的概念,因此我可以将高度和宽度设置为100%.但看起来Flutter似乎没有这个概念,只是硬编码高度和宽度是不好的,所以我被卡住了.

这就是我所拥有的(我使用的是Stack,因为我在图像的前景中有一些东西):

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,
  ],
);

Answer 1

错误的方法在这里.

请改用DecorativeBox.或者Container的属性decoration/foregroundDecoration(然后使用DecoratedBox).

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

Answer 2

以下将使图像适合容器宽度的100%,而高度是恒定的.对于本地资产,请使用AssetImage

Container(
  width: MediaQuery.of(context).size.width,
  height: 100,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage("https://picsum.photos/250?image=9"),
    ),
  ),
)

图像填充模式:

• 填充 - 图像被拉伸

  fit: BoxFit.fill
  

  

• 适合高度 - 图像保持成比例,同时确保显示图像的整个高度(可能溢出)

  fit: BoxFit.fitHeight
  

  

• 适合宽度 - 图像保持成比例,同时确保显示图像的整个宽度(可能溢出)

  fit: BoxFit.fitWidth
  

  

• 封面 - 图像保持成比例,确保容器的最大覆盖范围(可能溢出)

  fit: BoxFit.cover
  

  

• 包含 - 图像保持比例,尽可能小,如果需要显示整个图像将减小它的大小

  fit: BoxFit.contain
  

  

Answer 3

在Stack中,你应该将你的background小部件包装在Positioned.fill中.

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

Answer 4

对我来说，要为 Web 开发，以下工作正常：

Image(
  image: AssetImage('lib/images/portadaSchamann5.png'),
  alignment: Alignment.center,
  height: double.infinity,
  width: double.infinity,
  fit: BoxFit.fill,
),

Answer 5

可能不是 OP 正在寻找的内容，但是这个页面是我在查找问题后发现自己的地方，因此与遇到类似问题的每个人共享此页面:)

Stack 的fit属性满足了我的需求。否则里面的图像（OctoImageIn my case）被填充并且提供其他Image.fit值没有产生任何效果。

Stack(
  fit: StackFit.expand, 
  children: [
    Image(
      image: provider,
      fit: BoxFit.cover,
    ),
    // other irrelevent children here
  ]
);

Answer 6

您的问题包含第一步，但您需要宽度和高度。你可以得到屏幕的宽度和高度。这是一个小编辑

//gets the screen width and height
double Width = MediaQuery.of(context).size.width;
double Height = MediaQuery.of(context).size.height;

Widget background = new Image.asset(
  asset.background,
  fit: BoxFit.fill,
  width: Width,
  height: Height,
);

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

您还可以使用 Width 和 Height 根据屏幕大小调整其他对象的大小。

前任： width: Height/2, height: Height/2 //using height for both keeps aspect ratio

Answer 7

我在此页面上找到的这个问题的最佳示例： https ://flutterbeads.com/set-background-image-in-flutter/

通过使用 BoxDecoration 和 DecorationImage：

Container(
  constraints: BoxConstraints.expand(),
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: AssetImage("assets/images/cat2.jpg"), 
        fit: BoxFit.cover),
  )

Answer 8

我认为就您的目的而言，Flex可以比 Container() 更好地工作：

new Flex(
    direction: Axis.vertical,
    children: <Widget>[
      Image.asset(asset.background)
    ],
   )

Answer 9

这应该有效，

Image.asset('assets/bg.jpg',fit: BoxFit.cover,),