flutter - 图像未覆盖 flutter 中的完整设备尺寸

Question

我正在尝试添加覆盖设备宽度和高度的图像，并且该图像还需要在其上包含文本。首先，在添加图像时，我在 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,
        ),
      ),
    );
  }
}

如果您有任何疑问，请在评论中告诉我；)

Answer 1

设置您的Stack适合展开:

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