Flutter问题：点击AppBar菜单按钮后Drawer无法直接滑出，先显空白页

你的问题出在NavigationDrawer组件内部嵌套了Scaffold。主页面的Scaffold把NavigationDrawer当作drawer，而NavigationDrawer本身返回的是一个带drawer的Scaffold——这就导致点击主菜单按钮时，打开的是一个空白的Scaffold页面（因为这个嵌套的Scaffold没有body内容），而这个页面的Drawer需要手动拖动才能显示。

解决方案 #

修改navigation.dart中的NavigationDrawerState的build方法，去掉外层的Scaffold，直接返回Drawer组件；同时优化buildMenu中重复创建Future的问题，避免每次build都重复发起网络请求。

修改后的navigation.dart代码

class NavigationDrawer extends StatefulWidget {
  const NavigationDrawer({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return NavigationDrawerState();
  }
}

class NavigationDrawerState extends State<NavigationDrawer> {
  late Future<List<Menu>> listMenus;

  @override
  void initState() {
    super.initState();
    listMenus = fetchMenus(); // 仅初始化时发起一次网络请求
  }

  @override
  Widget build(BuildContext context) {
    // 直接返回Drawer组件，移除嵌套的Scaffold
    return Drawer(
      child: Column(
        children: [
          buildHeader(),
          buildMenu(),
        ],
      ),
    );
  }

  Widget buildHeader() {
    return const Center(
      child: Card(
        child: SizedBox(
          width: 300,
          height: 100,
          child: Center(child: Text('Elevated Card')),
        ),
      ),
    );
  }

  Widget buildMenu() {
    // 复用initState中初始化的Future对象，避免重复请求
    return Expanded(
      child: FutureBuilder<List<Menu>>(
        future: listMenus,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.separated(
              itemBuilder: (context, index) {
                var menu = snapshot.data![index];
                return Container(
                  padding: const EdgeInsets.all(10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      // Text(menu.name),
                      const SizedBox(height: 5),
                      Text(menu.folder),
                    ],
                  ),
                );
              },
              separatorBuilder: (context, index) {
                return const Divider();
              },
              itemCount: snapshot.data!.length,
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text("${snapshot.error}"),
            );
          }
          return const Center(
            child: CircularProgressIndicator(
              backgroundColor: Colors.cyanAccent,
            ),
          );
        },
      ),
    );
  }
}

关键修改说明 #

1. 移除嵌套Scaffold：build方法直接返回Drawer组件，主页面的Scaffold会将其识别为抽屉内容，点击菜单按钮时直接滑出。
2. 复用Future对象：buildMenu中不再重新创建listMenus，而是使用initState中初始化的对象，避免组件每次重建都重复发起网络请求。

修改后，点击AppBar的三线图标，Drawer会直接从左侧滑出，不会再出现空白页面。

内容的提问来源于stack exchange，提问作者Mahsun Işık