Flutter技术问题：无Scaffold用Drawer及让Body显示在AppBar后方

嘿，刚好我之前折腾过类似的场景，给你分享两个问题的实用解决方案：

其实Drawer组件本身并不绑定Scaffold，我们可以用DrawerController手动管理它的显示/隐藏状态，配合手势或按钮触发就行。这里有个完整的可运行示例：

class NoScaffoldDrawerDemo extends StatefulWidget {
  @override
  _NoScaffoldDrawerDemoState createState() => _NoScaffoldDrawerDemoState();
}

class _NoScaffoldDrawerDemoState extends State<NoScaffoldDrawerDemo> {
  final GlobalKey<DrawerControllerState> _drawerKey = GlobalKey();
  bool _isDrawerOpen = false;

  void _toggleDrawer() {
    _isDrawerOpen 
        ? _drawerKey.currentState?.close() 
        : _drawerKey.currentState?.open();
    setState(() => _isDrawerOpen = !_isDrawerOpen);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 主内容区：抽屉打开时点击空白可关闭
        GestureDetector(
          onTap: _isDrawerOpen ? _toggleDrawer : null,
          child: Container(
            color: Colors.white,
            alignment: Alignment.center,
            child: ElevatedButton(
              onPressed: _toggleDrawer,
              child: Text(_isDrawerOpen ? '关闭抽屉' : '打开抽屉'),
            ),
          ),
        ),
        // 抽屉核心部分
        DrawerController(
          key: _drawerKey,
          alignment: DrawerAlignment.start,
          child: Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                DrawerHeader(
                  decoration: BoxDecoration(color: Colors.blueAccent),
                  child: Text('自定义抽屉', style: TextStyle(color: Colors.white)),
                ),
                ListTile(title: Text('选项1'), onTap: _toggleDrawer),
                ListTile(title: Text('选项2'), onTap: _toggleDrawer),
              ],
            ),
          ),
          onDrawerChanged: (isOpen) => setState(() => _isDrawerOpen = isOpen),
        ),
      ],
    );
  }
}

核心思路是用DrawerController接管Drawer的状态，通过GlobalKey调用打开/关闭方法，同时给主内容区加手势监听，实现点击空白关闭抽屉的交互，完全脱离Scaffold也能正常工作。

先给你一个更简单的替代思路：你想要内容显示在透明AppBar后方，其实不用放弃Scaffold！Scaffold自带extendBodyBehindAppBar参数，设置为true后，body的内容会自动延伸到AppBar下方，再把AppBar设为透明、去掉阴影，就能完美实现需求，还能保留Scaffold的所有功能：

class TransparentAppBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0, // 去掉阴影
        title: Text('透明AppBar', style: TextStyle(color: Colors.black)),
        leading: IconButton(
          icon: Icon(Icons.menu, color: Colors.black),
          onPressed: () => Scaffold.of(context).openDrawer(),
        ),
      ),
      drawer: Drawer(child: ListView(children: [DrawerHeader(child: Text('抽屉'))])),
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage('https://picsum.photos/1080/1920'), // 示例背景图
            fit: BoxFit.cover,
          ),
        ),
        child: Center(child: Text('内容在AppBar后方', style: TextStyle(color: Colors.white, fontSize: 20))),
      ),
    );
  }
}

如果你的场景确实必须用Stack（比如有更复杂的层级布局需求），那针对那些依赖Scaffold上下文的组件（比如SnackBar、FloatingActionButton定位、Drawer状态），可以这样处理：

1. SnackBar：用ScaffoldMessenger.of(context).showSnackBar()替代旧的Scaffold.of(context)方式，ScaffoldMessenger是Flutter 2.0+引入的，只要你的App是用MaterialApp包裹的，它就能全局生效，不依赖当前上下文的Scaffold。

2. 保留Scaffold上下文：把Stack放在Scaffold的body里，隐藏Scaffold自带的AppBar，自己在Stack里实现自定义透明AppBar。这样既保留了Scaffold的上下文，又能自由控制布局层级：

class StackWithScaffoldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null, // 隐藏自带AppBar
      drawer: Drawer(child: ListView(children: [DrawerHeader(child: Text('抽屉'))])),
      body: Stack(
        children: [
          // 底层内容
          Container(
            color: Colors.grey[200],
            child: Center(child: Text('底层内容', style: TextStyle(fontSize: 20))),
          ),
          // 自定义透明AppBar（适配状态栏高度）
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
              height: kToolbarHeight + MediaQuery.of(context).padding.top,
              child: Row(
                children: [
                  IconButton(
                    icon: Icon(Icons.menu),
                    onPressed: () => Scaffold.of(context).openDrawer(),
                  ),
                  Spacer(),
                  Text('自定义AppBar', style: TextStyle(fontSize: 18)),
                  Spacer(),
                ],
              ),
            ),
          ),
          // 浮动按钮
          Positioned(
            bottom: 20,
            right: 20,
            child: FloatingActionButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('点击了FAB！')),
                );
              },
              child: Icon(Icons.add),
            ),
          ),
        ],
      ),
    );
  }
}

这样一来，你既可以自由堆叠布局元素，又能正常使用所有Material组件，完全不会出现依赖Scaffold的问题。

内容的提问来源于stack exchange，提问作者ryanafrish7