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

Posted 2023-02-23

【中文标题】如何设置脚手架的背景图片？

【英文标题】：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,

【参考方案1】：

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

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