Flutter多页面导航如何实现顶部AppBar固定不被替换

你当前的问题本质是默认Navigator跳转是替换整个页面路由，要实现AppBar跨页面固定，需要将AppBar放在路由栈的上层，仅切换下方的页面内容，常用两种实现方案：

方案1：IndexedStack切换页面（无路由栈，适合少量固定页面切换） #

该方案无需路由跳转，通过索引切换展示的子页面，实现最简单，性能更优：

1. 改造所有业务页面，移除页面自带的Scaffold和AppBar，仅返回页面主体内容
2. 新建外层共通容器页，固定配置AppBar，通过IndexedStack承载所有子页面
3. 页面切换时仅修改索引值触发UI刷新即可

示例代码：

// 外层共通容器页
import 'package:flutter/material.dart';
import 'home.dart';
import 'add_policy.dart';

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

  @override
  State<MainScaffold> createState() => _MainScaffoldState();
}

class _MainScaffoldState extends State<MainScaffold> {
  int _currentPageIndex = 0;
  final List<Widget> _pageList = const [
    HomeScreen(),
    AddPolicyScreen(),
  ];

  // 暴露页面切换方法，子页面可通过状态管理或传参调用
  void changePage(int index) {
    setState(() => _currentPageIndex = index);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 全局固定的AppBar，所有子页面共用
      appBar: AppBar(
        title: const Text("Samkit"),
        backgroundColor: Colors.blue,
        // 原有AppBar的其他配置统一放在此处
      ),
      body: IndexedStack(
        index: _currentPageIndex,
        children: _pageList,
      ),
    );
  }
}

方案2：嵌套Navigator（保留路由栈，支持页面返回逻辑） #

如果需要保留路由的跳转、返回、传参等能力，可使用嵌套Navigator将路由跳转的作用域限制在AppBar下方的区域：

1. 同样改造所有业务页面，移除自带的Scaffold和AppBar
2. 外层容器页的body属性传入自定义Navigator，配置路由表
3. 业务页面跳转时使用嵌套Navigator的上下文操作，不会替换上层AppBar

示例代码：

// 外层共通容器页
class MainScaffold extends StatelessWidget {
  const MainScaffold({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Samkit"),
        backgroundColor: Colors.blue,
      ),
      // 嵌套Navigator，路由跳转仅在该区域生效
      body: Navigator(
        initialRoute: '/',
        onGenerateRoute: (settings) {
          switch (settings.name) {
            case '/':
              return MaterialPageRoute(builder: (_) => const HomeScreen());
            case '/addPolicy':
              return MaterialPageRoute(builder: (_) => const AddPolicyScreen());
            default:
              throw Exception('无效路由: ${settings.name}');
          }
        },
      ),
    );
  }
}

业务页面跳转代码：

// HomeScreen中AddPolicy按钮的跳转逻辑
ElevatedButton(
  onPressed: () => Navigator.of(context).pushNamed('/addPolicy'),
  child: const Text("Add Policy"),
)

如果需要AppBar的标题、按钮等内容跟随页面动态变化，可通过Provider、Bloc等状态管理工具同步当前页面的配置参数，修改上层AppBar的对应属性即可。

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