Flutter:应用程序栏背景图像

ff29svar  于 2022-12-30  发布在  Flutter
关注(0)|答案(6)|浏览(170)

是否可以在Scaffold的应用栏中添加背景图片?我知道切片,但是当你向下滚动时,图片会被隐藏,应用栏会改变颜色,对吗?所以我想知道这是否可行,如果不行,是否有任何现有的解决方案?谢谢!

kr98yfug

kr98yfug1#

不要使用Zulfiqar did这样的Stack小部件,而是在AppBar小部件的flexibleSpace参数中传递背景图像:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Bar!'),
        flexibleSpace: Image(
          image: AssetImage('assets/image.png'),
          fit: BoxFit.cover,
        ),
        backgroundColor: Colors.transparent,
      ),
      body: Container(),
    );
  }
46scxncf

46scxncf2#

我在使用iOS时遇到了一些问题,Hafiz Nordin的回答是:在iOS上,图片没有覆盖整个应用栏,只留下了一小块透明的空间。
对我来说,解决办法是使用一个带有DecorationImage的容器来代替。

AppBar(
  flexibleSpace: Container(
    decoration: 
      BoxDecoration(
        image: DecorationImage(
          image: AssetImage(),
          fit: BoxFit.cover,
        ),
      ),
  ),
  backgroundColor: Colors.transparent,
  title: Text("App Bar"),
);
gkl3eglg

gkl3eglg3#

Widget build(BuildContext context) {

return new Container(
  child: new Stack(children: <Widget>[
    new Container(
      child: new Image.asset('assets/appimage.jpg'),
      color: Colors.lightGreen,
    ),
    new Scaffold(
      appBar: new AppBar(title: new Text('Hello'),
      backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      backgroundColor: Colors.transparent,
      body: new Container(
        color: Colors.white,
        child: new Center(
        child: new Text('Hello how are you?'),),)
    )
  ],),
);
}
j8ag8udp

j8ag8udp4#

完整示例

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Text('How to Flutter', style: TextStyle(
            color: Colors.white,
            fontSize: 28
        ),) ,
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/bg.jpg'),
            fit: BoxFit.fill
          )
        ),
      ),
    )

35g0bw71

35g0bw715#

appBar: AppBar(
        title: Text('Current deals'),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('images/nav-header.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
yfwxisqw

yfwxisqw6#

可以通过以下两种方式之一完成:

仅用于Scaffold的appBar的背景图像

appBar: AppBar(
          title: const Text(
            "Home Page",
            style: TextStyle(color: Colors.white),
          ),
          flexibleSpace: const Image(
            image: NetworkImage(
                'https://th.bing.com/th/id/OIP.AjOYK61Fo6R4XdkOHnh_UQHaBr?pid=ImgDet&rs=1'),
            fit: BoxFit.fill,
          ),
        ),

跨越支架主体的背景图像

Scaffold(
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      elevation: 0,
      title: const Text(
        "Home Page",
        style: TextStyle(color: Colors.black),
      ),
      backgroundColor: Colors.transparent,
    ),
    body: Container(
      height: 200,
      width: double.infinity,
      decoration: const BoxDecoration(
          image: DecorationImage(
              fit: BoxFit.fill,
              image: NetworkImage(
                  'https://th.bing.com/th/id/OIP.AjOYK61Fo6R4XdkOHnh_UQHaBr?pid=ImgDet&rs=1'))),
    ));

相关问题