Question

我想将图像设置为脚手架的背景色。设置AppBar和底部栏时，使用Container的装饰作为支架的主体不能覆盖整个屏幕。

我要显示全屏背景。下面是我的脚手架代码：

Scaffold(
      backgroundColor: Image.asset('images/background.png').color,
      body: Container(
        decoration: defaultAppBoxDecoration(),
      ),
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        title: Text('Title here', style: TextStyle(color: Colors.teal),),
        leading: IconButton(
          icon: Image.asset('images/star.png'),
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(icon: Image.asset('images/star.png')),
                  //  IconButton(icon: Image.asset('images/grid.png')),

        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        child:           IconButton(icon: Image.asset('images/star.png')),
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.only(left: 4.0, right: 4.0),
        height: 44.0 + MediaQuery.of(context).padding.bottom,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
                      IconButton(icon: Image.asset('images/star.png')),
          IconButton(icon: Image.asset('images/star.png')),

          ],
        ),
      ),
    );

Answer 1

您可以将脚手架放置在带有背景图像的容器中，并为脚手架的身体使用透明颜色，如下所示：

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/bg.jpg"),
      fit: BoxFit.cover,
    ),
  ),
  child: Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    backgroundColor: Colors.transparent,
    body: Container(),
),);

Answer 2

尝试使用Stack检查以下示例：

  @override
    Widget build(BuildContext context) {
      return Stack(
        children: <Widget>[
          Image.asset(
            "resources/background.png",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0.0,
              ),
              bottomNavigationBar: Container(
                padding: EdgeInsets.only(left: 4.0, right: 4.0),
                height: 44.0 + MediaQuery.of(context).padding.bottom,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    IconButton(icon: Icon(Icons.star)),
                    IconButton(icon: Icon(Icons.star)),
                  ],
                ),
              ),
              body: Text("Hello world"))
        ],
      );
    }

脚手架的背景图片

2 个答案: