图像未覆盖整个设备尺寸答案

【问题标题】：Image not covering full device dimensions in flutter图像未覆盖整个设备尺寸
【发布时间】：2020-08-15 21:39:16
【问题描述】：

我正在尝试添加一个覆盖设备宽度和高度的图像，该图像还需要在其上添加文本。起初，当我在 Image.dart 文件上添加图像时，我使用了fit: BoxFit.fill，这样图像就可以覆盖整个屏幕并且可以正常工作。然后为了在图像上放置文本，我添加了包含图像和文本的 Stack 小部件，一旦我这样做，文本就在图像上方，但现在图像没有覆盖全屏高度。为什么会出现这个问题？

// main.dart
void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: ImageContainer(),
    );
  }
}

// ImageContainer.dart
class ImageContainer extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stack(
            children: [
              MainImage("assets/images/startwars.jpg"),
              Positioned(
                bottom: 0,
                left: 0, 
                child: Container(
                  child: Text(
                    "someText",
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
                  )
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

// Image.dart
class MainImage extends StatelessWidget {
  final String _assetPath;
  MainImage(this._assetPath);
  
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.red,),
      child: Expanded(
        child: Image.asset(
          _assetPath,
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}

如果您有任何问题，请在 cmets 中告诉我；）

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

我通过在 Image.dart 文件中向容器添加约束来解决此问题，我所做的只是添加了这一行。经过大量调查后，我意识到将 MediaQuery 添加到高度会告诉应用程序覆盖屏幕的高度，这也可以通过宽度来完成。

Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.red,),
      constraints: BoxConstraints.expand(height: MediaQuery.of(context).size.height), // add this line

      child: Expanded(
        child: Image.asset(
          _assetPath,
          fit: BoxFit.fill,
        ),
      ),
    );
  }

【讨论】：

【解决方案2】：

设置您的Stack 适合扩展：

Stack(
  fit: StackFit.expand,
  children: [],
);

【讨论】：

HBS 看起来这对我不起作用，我遇到异常并且图像不显示
这是我得到的错误：引发了另一个异常：BoxConstraints 强制使用无限高度。

【解决方案3】：

您可以设置 Stack fit .. 堆（适合：StackFit.expand，...）您还可以添加 Container ( child:Image( ... ), width: double.infinity, heigh:...)

【讨论】：

我在 Image 上方添加容器时遇到了一些错误，但是当使用 witdh: double.infinity 和 height: double.infinity 在扩展和 Image 上方添加容器时，我只得到一个错误，如下所示：Another exception was thrown: BoxConstraints forces an infinite height.
将高度从无限更改为 300 或 200 for ..