Question

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

Answer 1

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

Answer 2

与其使用Zulfiqar did之类的Stack小部件，而是将背景图片传递到flexibleSpace小部件的AppBar自变量：

 @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(),
    );
  }

Answer 3

在使用Hafiz Nordin的答案使用iOS时遇到了一些问题。在iOS上，图片无法覆盖整个应用栏，只剩下一个小的透明空间。

对我来说，解决方案是使用带有ROLE_TOUTOR的容器。

DecorationImage

Flutter：AppBar背景图片

3 个答案: