Flutter中如何实现App Bar在所有页面持续常驻显示？

错误原因说明 #

你之前将封装的AppBar放到drawer属性下不生效，是因为drawer是Scaffold的侧边抽屉配置项，仅在拉出侧边栏时展示，和顶部AppBar属于完全独立的配置，逻辑上不匹配。

可行实现方案 #

方案1：外层统一Scaffold管理子页面 #

适合底部导航栏切换多页面的场景，所有子页面共享外层的常驻AppBar，切换页面时AppBar无重绘跳动。

1. 先单独封装通用AppBar组件：

// 单独文件中封装的通用AppBar
class CommonAppBar extends PreferredSizeWidget {
  final String title;
  // 可扩展其他自定义参数，比如右侧动作按钮列表、背景色等
  final List<Widget>? actions;

  const CommonAppBar({super.key, required this.title, this.actions});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      centerTitle: true,
      actions: actions,
      // 其他全局通用样式配置
      backgroundColor: Colors.blue,
      elevation: 2,
    );
  }

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

2. 外层主入口使用统一Scaffold，body区域管理子页面切换：

class MainContainer extends StatefulWidget {
  const MainContainer({super.key});

  @override
  State<MainContainer> createState() => _MainContainerState();
}

class _MainContainerState extends State<MainContainer> {
  int currentPageIndex = 0;
  // 所有子页面，内部无需再单独配置AppBar
  final List<Widget> pageList = const [HomePage(), CategoryPage(), MinePage()];
  // 可配置不同页面对应的AppBar标题
  final List<String> titleList = const ["首页", "分类", "我的"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 常驻AppBar，可根据当前页面动态修改属性
      appBar: CommonAppBar(title: titleList[currentPageIndex]),
      // 子页面渲染区域
      body: IndexedStack(
        index: currentPageIndex,
        children: pageList,
      ),
      // 底部导航栏可根据需求添加
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentPageIndex,
        onTap: (index) => setState(() => currentPageIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
        ],
      ),
    );
  }
}

方案2：全局路由包裹实现 #

适合使用Navigator.push/pop跳转路由时也需要保留AppBar的场景，所有路由页面都会自动继承外层的AppBar。

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '全局常驻AppBar演示',
      initialRoute: '/home',
      routes: {
        '/home': (context) => const HomePage(),
        '/detail': (context) => const DetailPage(),
      },
      // 核心配置：通过builder包裹全局通用结构
      builder: (context, child) {
        return Scaffold(
          // 全局常驻AppBar
          appBar: const CommonAppBar(title: "全局标题"),
          // 路由页面内容渲染在body区域
          body: child,
        );
      },
    );
  }
}

注意事项 #

• 子页面内部如果单独使用Scaffold，不要配置extendBodyBehindAppBar为true，避免页面内容被AppBar遮挡
• 如果需要个别页面隐藏常驻AppBar，可通过全局状态管理（如Provider、Riverpod）控制AppBar的显隐状态，在对应页面修改状态即可
• 若需要不同页面展示不同的AppBar右侧动作按钮，可扩展CommonAppBar的参数，结合状态管理动态传递动作组件

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