Question

我使用透明的AppBar，我想在透明的AppBar后面显示身体而不是下面。怎么做？

Answer 1

要将主体放置在 AppBar 下并使AppBar透明，需要 Stack 作为主体。 Stack必须包含AppBar而不是脚手架。

body: Stack(
        children: <Widget>[...]
),

堆栈中的第一个项目在底部，随后的项目在其上方。如果AppBar是透明的，则它似乎可以正常工作，但事实并非如此。将AppBar设为绿色将向您显示原因。

return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
          ),
          AppBar(title: Text('Hello world'),
            backgroundColor: Colors.green,
          )
        ],);

如您所见，AppBar占据了整个屏幕，并且将消耗所有触摸事件。

要解决此问题，请使用Position Widget，

body: Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
          ),
          new Positioned(
          top: 0.0,
          left: 0.0,
          right: 0.0,
          child: AppBar(title: Text('Hello world'),
            backgroundColor: Colors.green,
          ),),
        ], )

您会得到的：

好，现在使AppBar透明并去除阴影：

body: Stack(
        children: <Widget>[
          Container( //My container or any other widget
            color: Colors.blue,
          ),
          new Positioned( //Place it at the top, and not use the entire screen
          top: 0.0,
          left: 0.0,
          right: 0.0,
          child: AppBar(title: Text('Hello world'),
            backgroundColor: Colors.transparent, //No more green
            elevation: 0.0, //Shadow gone
          ),),
        ], )

希望这对您有帮助...

Answer 2

您可以使用

Scafold(
extendBodyBehindAppBar: true,
)

在Flutter稳定版1.12+中可用

Answer 3

您可以使用此代码

return new Scaffold(
  body: new Stack(
    children: <Widget>[
      new Container(
        color: Colors.blue.shade200,
      ),
      new AppBar(
        title: new Text("App bar"),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      new Positioned(
        top: 80.0,
        left: 0.0,
        bottom: 0.0,
        right: 0.0,
        //here the body
        child: new Column(
          children: <Widget>[
            new Expanded(
              child: Container(
                color: Colors.grey,
              ),
            )
          ],
        ),
      ),
    ],
  ),
);

Answer 4

要在顶部AppBar后面扩展支架主体，请将其添加到支架中：

extendBodyBehindAppBar: true,

要将支架主体延伸到BottomNavigationBar或BottomAppBar的后面（当您停靠的FloatingActionButton可以改善UI的外观），请将其添加到支架中：

extendBody: true,

如您在我的示例中所见，这会使主体延伸到屏幕的最底部，因此您需要确保添加间距，以便BottomAppBar不会隐藏UI功能。

Answer 5

从脚手架中删除 appBar 然后只需在 body 中设置Stack Widget，然后将AppBar包装为Positioned部件中的最后一个部件。

注意：其他答案正确。但这是发布的，因为如果有人想要渐变AppBar背景和上方的浮动Card。：）

 @override
 Widget build(BuildContext context) {
    return Scaffold(
   body: setUserForm()
    );
  }

  Widget setUserForm() {
    return Stack(children: <Widget>[
    // Background with gradient
      Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.bottomCenter,
                  colors: [Colors.red[900], Colors.blue[700]])),
          height: MediaQuery.of(context).size.height * 0.3
        ),
    //Above card
      Card(
          elevation: 20.0,
          margin: EdgeInsets.only(left: 15.0, right: 15.0, top: 100.0),
          child: ListView(
              padding:
              EdgeInsets.only(top: 20.0, left: 20.0, right: 18.0, bottom: 5.0),
              children: <Widget>[
                TextField(),
                TextField()
              ]

        )),
      // Positioned to take only AppBar size 
      Positioned( 
        top: 0.0,
        left: 0.0,
        right: 0.0,
        child: AppBar(        // Add AppBar here only
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          title: Text("Doctor Form"),
        ),
      ),

    ]);
  }

Answer 6

新的选项extendBodyBehindAppBar现在在脚手架上可用。参见PR here。

如果它仍然是无法识别的参数，请确保切换到dev频道和flutter upgrade。

Answer 7

一段时间后，我不知道这是否对任何人都有帮助，但是...确实可以。

问题：我想在我的Scaffold的正文中具有渐变背景，而在Android中，AppBar弄得一团糟。

我的解决方案：

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title:  Text("AppBar text"),
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                HexColor.hexToColor("D76984"),
                HexColor.hexToColor("2369C0")
              ]),
        ),
      )
    );

使用Stack的其他解决方案也可能有效，但是此屏幕的整个设计都被迫使用Stack，对于我来说，它的响应性不如使用其他小部件...但这就是我。

如何在支架小部件的AppBar下显示体，而不是下面？

7 个答案: