Flutter：AppBar 背景图片

Posted 2023-02-23

【中文标题】Flutter：AppBar 背景图片

【英文标题】：Flutter: AppBar background image

【发布时间】：2019-02-09 03:50:12

【问题描述】：

是否可以在 Scaffold 的 AppBar 中添加背景图片？我知道 sliver，但是当您向下滚动时，图像会被隐藏并且 AppBar 会改变颜色，对吗？所以我想知道这是否可能，如果没有，是否有任何现有的解决方法？谢谢！

【参考方案1】：

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

【参考方案2】：

我在使用 ios 和 Hafiz Nordin 的回答时遇到了一些问题。在 iOS 上，图像不会覆盖整个应用栏，留下一个小的透明空间。

我的解决方案是改用带有DecorationImage 的容器。

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

【参考方案3】：

与其使用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(),
    );
  

【讨论】：

这不会使AppBar 与您的图像一样大，它会剪切图像。

如果你想调整 AppBar 的大小以获得更大的图像或其他东西你可以自己设置高度 AppBar( toolbarHeight: 100, // 默认为 56 toolbarOpacity: 0.5, ),

【参考方案4】：

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?'),),)
    )
  ],),
);

【讨论】：

你好 Zulfiqar。是否有一个解决方案，它更像是一个主题？我想更改所有 appBar 的背景图片。由于我有很多屏幕，我不想将更改应用于所有屏幕。谢谢！

你不能只创建一个容器小部件并在所有屏幕上使用它吗？