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

Question

我正在使用一个透明的AppBar,我想在透明的AppBar后面显示身体而不是下面.怎么做 ？

Answer 1

要将主体放在AppBar下并使AppBar透明,需要使用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

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

注意：其他答案是正确的。但是发布这个是因为如果有人想要渐变 AppBar 背景和它上面的浮动卡片。:)

 @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 3

你可以用

Scafold(
extendBodyBehindAppBar: true,
)

（目前在开发者频道上可用）

https://github.com/flutter/flutter/pull/39156

Answer 4

截屏：

代码：

如果您想通过透明来占据整个空间AppBar，您还应该设置shadowColor为透明颜色。

Scaffold(
  extendBodyBehindAppBar: true, // <-- Set this
  appBar: AppBar(
    backgroundColor: Colors.transparent, // <-- this
    shadowColor: Colors.transparent, // <-- and this
  ),
  body: Placeholder(color: Colors.red),
)