Flutter响应式网站抽屉点击不显示内容：如何修改MobileNavbar

问题核心是仅创建Drawer实例但未触发弹出逻辑，需通过Scaffold的状态控制来实现抽屉显示。以下是具体修改方案：

步骤1：给父级Scaffold设置GlobalKey #

在包含MobileNavbar的页面中，定义一个GlobalKey来关联Scaffold，用于后续控制抽屉：

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey,
    appBar: MobileNavbar(scaffoldKey: _scaffoldKey),
    // 配置抽屉内容
    drawer: Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: const [
          DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Text('抽屉头部'),
          ),
          ListTile(title: Text('列表项1'), onTap: () {}),
          ListTile(title: Text('列表项2'), onTap: () {}),
        ],
      ),
    ),
    body: // 页面主体内容
  );
}

步骤2：修改MobileNavbar类，添加抽屉触发逻辑 #

让MobileNavbar接收Scaffold的GlobalKey，并在图标点击事件中调用抽屉弹出方法：

class MobileNavbar extends StatelessWidget implements PreferredSizeWidget {
  final GlobalKey<ScaffoldState> scaffoldKey;

  const MobileNavbar({super.key, required this.scaffoldKey});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: IconButton(
        icon: const Icon(Icons.menu),
        onPressed: () {
          // 触发抽屉弹出
          scaffoldKey.currentState?.openDrawer();
        },
      ),
      title: const Text('移动端导航栏'),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

关键说明 #

• 抽屉是Scaffold的子组件，必须通过Scaffold的状态来控制显示，直接创建Drawer实例不会触发弹出
• 使用GlobalKey是最可靠的方式，避免因组件嵌套过深导致Scaffold.of(context)获取不到状态的问题
• 确保Drawer已正确配置在Scaffold的drawer属性中，而非仅在MobileNavbar内定义

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