Flutter中如何移除导航抽屉跳转页面的App Bar标题与汉堡图标？

你的问题根源在于所有页面都共享同一个Scaffold的AppBar和Drawer，导致切换页面时，顶部的标题和汉堡图标不会跟着变化。下面给你两种解决方案，推荐第一种更符合Flutter导航规范的方式：

方案一：让每个页面独立管理Scaffold和AppBar #

这种方式下，每个页面都是完整的Scaffold，各自控制自己的标题、是否显示抽屉，完全符合Flutter的导航逻辑。

步骤1：重构NavigationDrawer为纯抽屉组件 #

把原来包含Scaffold的NavigationDrawer改成只提供抽屉内容，不再包裹整个页面：

class NavigationDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final drawerItems = [
      DrawerItem("First Screen", Icons.looks_one),
      DrawerItem("Second Screen", Icons.looks_two),
      DrawerItem("Tabs", Icons.tab),
    ];

    return Drawer(
      child: Column(
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text('Akshay Kadam (A2K)'),
            accountEmail: Text('a2k@gmail.com'),
          ),
          ...drawerItems.map((item) {
            return ListTile(
              leading: Icon(item.icon),
              title: Text(
                item.title,
                style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w400),
              ),
              onTap: () {
                Navigator.of(context).pop(); // 先关闭抽屉
                // 根据点击项跳转对应页面
                switch (drawerItems.indexOf(item)) {
                  case 0:
                    Navigator.pushReplacement(context, 
                      MaterialPageRoute(builder: (_) => FirstScreen()));
                    break;
                  case 1:
                    Navigator.push(context, 
                      MaterialPageRoute(builder: (_) => SecondScreen()));
                    break;
                  case 2:
                    Navigator.push(context, 
                      MaterialPageRoute(builder: (_) => Tabs()));
                    break;
                }
              },
            );
          }).toList(),
        ],
      ),
    );
  }
}

class DrawerItem {
  String title;
  IconData icon;
  DrawerItem(this.title, this.icon);
}

步骤2：让每个页面实现自己的Scaffold #

• FirstScreen（保留抽屉和原标题）：

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      drawer: NavigationDrawer(), // 绑定抽屉
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => Navigator.push(context, 
                MaterialPageRoute(builder: (_) => SecondScreen())),
              child: Text('Go to Second Screen'),
            ),
            ElevatedButton(
              onPressed: () => Navigator.push(context, 
                MaterialPageRoute(builder: (_) => Tabs())),
              child: Text('Go to Tabs Screen'),
            ),
          ],
        ),
      ),
    );
  }
}

• SecondScreen（自定义标题，无汉堡图标）：

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      // 不设置drawer，自然不会显示汉堡图标
      body: Center(child: Text('This is Second Screen')),
    );
  }
}

• TabsScreen（自定义标题+TabBar）：

class Tabs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Tabs Screen'),
          bottom: TabBar(tabs: [Tab(text: 'Tab 1'), Tab(text: 'Tab 2')]),
        ),
        body: TabBarView(
          children: [
            Center(child: Text('Tab 1 Content')),
            Center(child: Text('Tab 2 Content')),
          ],
        ),
      ),
    );
  }
}

方案二：动态修改原Scaffold的AppBar（快速临时方案） #

如果不想重构页面结构，可以在原NavigationDrawer的Scaffold中，根据选中的索引动态修改标题和是否显示汉堡图标：

@override
Widget build(BuildContext context) {
  // ... 其他代码不变
  return Scaffold(
    appBar: AppBar(
      // 动态设置标题
      title: Text(drawerItems[_selectionIndex].title),
      // 只有选中First Screen时才显示汉堡图标
      automaticallyImplyLeading: _selectionIndex == 0,
    ),
    drawer: Drawer(/* ... 抽屉内容不变 ... */),
    body: _getDrawerItemScreen(_selectionIndex),
  );
}

⚠️ 注意：这种方式适合简单场景，但如果后续页面有复杂的AppBar需求（比如Tabs的TabBar），就会受限，所以还是推荐方案一。

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