使用Flutter无法让图像适合整个屏幕

Question

我正在尝试将图像适合整个空间，我将 Image.asset 包装到扩展小部件中，但图像并未覆盖整个空间，我已使用 BoxFit 枚举中的所有选项，并且它并没有真正改变方式应用程序看起来。你们中有人知道可以改变什么吗？

这是脚手架内主体的代码：

body: Column(
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.brown[200],
              padding: const EdgeInsets.all(20),
              alignment: Alignment.center,
              child: const Text('How I like my coffe...'),
            ),
            Container(
              color: Colors.brown[100],
              padding: const EdgeInsets.all(20),
              child: const CoffeePrefs(),
            ),
            Expanded(
              child: Image.asset(
                'assets/coffee-beans-bg.jpg',
                fit: BoxFit.fill, // Ensures the image fits the full width
              ),
            ),
          ],

这就是它的样子：

chrome 网页视图

我已将图像包装在 SizedBox、FittedBox 中，并更改 BoxFit 枚举。

Answer 1

属性

width

和

height

必须显式应用于

Image

。
您将在 flutter 文档上找到如下评论。

如果非空，则要求图像具有此宽度。
如果为空，图像将选择最能保留其固有纵横比的尺寸。
强烈建议指定 [宽度] 和 [高度]，或者将小部件放置在设置严格布局约束的上下文中，以便图像在加载时不会改变大小。
如果事先不知道确切的图像尺寸，请考虑使用 [fit] 来调整图像的渲染以适应给定的宽度和高度。

这是一个例子：

Widget build(BuildContext context) {
  Size size = MediaQuery.of(context).size;
  return Scaffold(
    body: Image.asset(
      'xxx.png',
      width: size.width,
      height: size.height,
      fit: BoxFit.fill,
    ),
  );
}