带有顶部（垂直）抽屉的 AppBar

Question

我正在尝试从 AppBar 底部制作抽屉。这是我到目前为止的地方

  double height = 5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Drawer'),
        actions: <Widget>[
          FlatButton(
            child: Text('press'),
            onPressed: () {
              setState(() {
                height == 5 ? height = 150 : height = 5;
              });
            },
          )
        ],
      ),
      body: Column(
        children: <Widget>[
          AnimatedContainer(
            color: Colors.green,
            duration: Duration(milliseconds: 500),
            height: height,
            child: ListView(
              children: <Widget>[Text('hello')],
            ),
          ),
          Container(
            height: 200,
            color: Colors.red,
          )
        ],
      ),
    );
  }

它以某种方式工作正常，但是这个解决方案移动了底部容器，我需要那个抽屉在它后面，或者换句话说，在红色容器的顶部展开。另一个问题是，当您将Column 和一些孩子放在动画容器中时，内容就会溢出。最好的解决方案是将那个抽屉移到 AppBar 后面而不是改变我猜的大小

这是我尝试修复溢出但没有用的方法

AnimatedContainer(
            color: Colors.green,
            duration: Duration(milliseconds: 500),
            height: height,
            child: height == 5
                ? Container(color: Colors.green)
                : Column(
                    children: <Widget>[Text('hello')],
                  ),
          )

Answer 1

试试这个，只需将列小部件更改为堆栈小部件，并在代码中交换容器和动画容器的位置。

double height = 5;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Drawer'),
        actions: <Widget>[
          FlatButton(
            child: Text('press'),
            onPressed: () {
              setState(() {
                height == 5 ? height = MediaQuery.of(context).size.height : height = 5;
              });
            },
          )
        ],
      ),
      body: Stack(
        children: <Widget>[
          Container(
            height: 200,
            color: Colors.red,
          ),
          AnimatedContainer(
            color: Colors.green,
            duration: Duration(milliseconds: 500),
            height: height,
            child: ListView(
              children: <Widget>[Text('hello')],
            ),
          )
        ],
      ),
    );

  }

Answer 2

以@delmin 和@niteesh 的代码为基础，添加了physics: NeverScrollableScrollPhysics(), 和height = MediaQuery.of(context).size.height

class AnimatedDrawerDemo extends StatefulWidget {
  @override
  _AnimatedDrawerDemoState createState() => _AnimatedDrawerDemoState();
}

class _AnimatedDrawerDemoState extends State<AnimatedDrawerDemo> {
  double height = 5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Drawer'),
        actions: <Widget>[
          FlatButton(
            child: Text('press'),
            onPressed: () {
              setState(() {
                height == 5
                    ? height = MediaQuery.of(context).size.height
                    : height = 5;
              });
            },
          )
        ],
      ),
      body: Stack(
        children: <Widget>[
          Container(
            height: 200,
            color: Colors.red,
          ),
          AnimatedContainer(
            color: Colors.green,
            duration: Duration(milliseconds: 500),
            height: height,
            child: ListView(
              physics: NeverScrollableScrollPhysics(),
              children: <Widget>[
                DrawerHeader(
                  child: Text('Drawer Header'),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                ),
                ListTile(
                  title: Text('Item 1'),
                  onTap: () {
                    // Update the state of the app
                    // ...
                    // Then close the drawer
                    //Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: Text('Item 1'),
                  onTap: () {
                    // Update the state of the app
                    // ...
                    // Then close the drawer
                    //Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: Text('Item 1'),
                  onTap: () {
                    // Update the state of the app
                    // ...
                    // Then close the drawer
                    //Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: Text('Item 1'),
                  onTap: () {
                    // Update the state of the app
                    // ...
                    // Then close the drawer
                    //Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: Text('Item 1'),
                  onTap: () {
                    // Update the state of the app
                    // ...
                    // Then close the drawer
                    //Navigator.pop(context);
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}