Flutter如何在appbar中扩展图像？

Question

我有这个颤振页面

我希望这个花朵图像背景也能覆盖整个应用栏，并带有 MyProfile 文本以及其他应用栏按钮，例如抽屉和搜索按钮。

这是目前的代码

Container(
                child: Stack(
                  alignment: Alignment.bottomCenter,
                  overflow: Overflow.visible,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Expanded(
                          child: Container(
                            height: 200.0,
                            decoration: BoxDecoration(
                                image: DecorationImage(
                                    fit: BoxFit.cover,
                                    image: NetworkImage(
                                        'https://timelinecovers.pro/facebook-cover/download/stunning-little-flowers-facebook-cover.jpg'))),
                          ),
                        )
                      ],
                    ),
                    Positioned(
                      top: 100.0,
                      child: Container(
                        height: 190.0,
                        width: 190.0,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: NetworkImage(
                                  'https://static.displate.com/280x392/displate/2020-06-20/97526a531e9ff32c26f7752ebc926941_07a032cb55575a397e6ba8c98804ad43.jpgD'),
                            ),
                            border:
                                Border.all(color: Colors.white, width: 6.0)),
                      ),
                    ),
                  ],
                ),
              ),

Answer 1

对您的代码和结果进行一些更改：

  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return SafeArea(child: Scaffold(
      body: Container(
        child: Stack(
          alignment: Alignment.bottomCenter,
          overflow: Overflow.visible,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 240.0,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                                'https://timelinecovers.pro/facebook-cover/download/stunning-little-flowers-facebook-cover.jpg'))),
                  ),
                )
              ],
            ),
            Positioned(
              top: 0.0,
              child: Container(
                width: width,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        IconButton(icon: Icon(Icons.menu,color: Colors.white,), onPressed: (){}),
                        Text('My Profile',style: TextStyle(color: Colors.white,fontSize: 22),),
                      ],
                    ),
                    IconButton(icon: Icon(Icons.notifications,color: Colors.white,), onPressed: (){}),
                  ],
                ),
                height: 52,
              ),
            ),
            Positioned(
              top: 120.0,
              child: Container(
                height: 190.0,
                width: 190.0,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                          'https://static.displate.com/280x392/displate/2020-06-20/97526a531e9ff32c26f7752ebc926941_07a032cb55575a397e6ba8c98804ad43.jpgD'),
                    ),
                    border:
                    Border.all(color: Colors.white, width: 6.0)),
              ),
            ),
          ],
        ),
      ),
    ));

  }```

Answer 2

您可以通过设置轻松实现：

• Scaffold 小部件中的 extendBodyBehindAppBar: true 属性。
• backgroundColor: Colors.transparent 并在 AppBar 小部件中设置 elevation: 0.0 以使其完全透明。

如果为true，并且指定了一个appBar，那么body的高度是 扩展为包括应用栏的高度和主体的顶部 与应用栏的顶部对齐。

如果应用栏的 AppBar.backgroundColor 不是 完全不透明。

来源：extendBodyBehindAppBar property from Flutter Doc

在此之后，将height 调整为：

• 背景图片
• 个人资料图片

我复制了你的代码并用上面的解决方案进行了调整，见下面的例子：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Text(widget.title),
        leading: Icon(Icons.list),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      body: Container(
        child: Stack(
          alignment: Alignment.bottomCenter,
          overflow: Overflow.visible,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 300.0,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                                'https://timelinecovers.pro/facebook-cover/download/stunning-little-flowers-facebook-cover.jpg'))),
                  ),
                )
              ],
            ),
            Positioned(
              top: 180.0,
              child: Container(
                height: 190.0,
                width: 190.0,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                          'https://static.displate.com/280x392/displate/2020-06-20/97526a531e9ff32c26f7752ebc926941_07a032cb55575a397e6ba8c98804ad43.jpgD'),
                    ),
                    border: Border.all(color: Colors.white, width: 6.0)),
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 3

请参考 Flutter 中 Scaffold 小部件的 this 属性。它会做你想做的事。您可能需要稍微调整大小。也许，让 AppBar 颜色透明。