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

Question

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

以下是我所拥有的（我使用了一个堆栈，因为我在图像的前景中有一些东西）：

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

要使图像填充其父图像，只需将其包装成FittedBox:

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

FittedBox这里将拉伸图像以填充空间。（注意，boxfit.fill曾经提供此功能，但是API同时发生了变化，使得boxfit不再提供此功能。fittedbox应该作为一种插入替换，不需要对构造函数参数进行任何更改。）

或者，对于复杂的装饰，您可以使用容器而不是图像-并使用装饰/前景装饰字段。

要使容器成为其父容器，它应该：

• 没有孩子
• 具有对齐属性notnull

下面的示例将两个图像和文本组合在单个容器中，同时取其父容器的100%宽度/高度：

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