如何设置脚手架的背景图片？答案

【问题标题】：How to set background image for scaffold?如何设置脚手架的背景图片？
【发布时间】：2021-07-19 23:28:12
【问题描述】：

我正在尝试为占据屏幕约 25% 的屏幕设置背景图像，位于顶部。我试过了，

@override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        actions: [
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              //Go to Settings Page
            },
          )
        ],
      ),
      body: Container(
        width: double.infinity,
        alignment: Alignment.topCenter,
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fitWidth,
            image: AssetImage(
              "assets/images/image1.png",
            ),
          ),
        ),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 200,
                width: 220,
                color: Colors.purple,
              ),
              Container(
                height: 200,
                width: 220,
                color: Colors.pink,
              ),

它没有与顶部对齐。有没有更简单的方法？我也尝试过使用堆栈。这就是我得到的：

预期。

【问题讨论】：

这能回答你的问题吗？ How do I Set Background image in Flutter?
设置适合：BoxFit.cover,

标签： flutter

【解决方案1】：

将容器作为 Scaffold 的主体，然后将您的图像设置为容器装饰内的背景图像。

不要忘记像这样设置容器的宽度和高度：宽度：Mediaquery.of(context).size.width 高度：Mediaquery.of(context).size.height

【讨论】：