Как отобразить тело под AppBar виджета scaffold, а не под ним?

Question

Я использую прозрачную панель приложений, и я хотел бы отобразить тело позади прозрачной панели приложений, а не внизу.Как это сделать?

Answer 1

Чтобы поместить тело под AppBar и сделать прозрачным AppBar , требуется Stack в качестве тела. Стек должен содержать панель приложений, а не эшафот.

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

Первый элемент в стопке находится внизу, а последующие элементы находятся над ним.Если панель приложений прозрачна, она будет работать, но это не так.Если зеленый цвет AppBar покажет вам, почему.

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

Как вы можете видеть, AppBar занимает весь экран и будет поглощать любые сенсорные события.

Чтобы исправить это, используйте Виджет положения ,

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

Удалите appBar из скаффолда и просто установите виджет стека в body , а затем оберните AppBar как последний виджет в виджете с позиционированием.

Примечание: Другие ответыверны.Но это опубликовано, потому что если кто-то хочет градиентный фон 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

Вы можете сделать это, используя этот код

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