Flutter导航新页面丢失AppBar与Drawer？咨询主体切换保留方案

1. 现有导航行为是否正常？ #

这是正常现象。你使用的Navigator.push配合MaterialPageRoute的核心作用就是向导航栈推入全新的独立路由页面，每个路由对应完整的Widget树，因此原页面的AppBar、Drawer等组件会被新页面的Widget树完全替换，自然会消失。

2. 如何实现仅切换主体内容、保留AppBar和Drawer且不重建？ #

以下是几种实用方案：

方案一：用IndexedStack管理主体内容 #

将AppBar、Drawer放在父页面中，主体部分通过IndexedStack根据索引切换内容。这种方式下AppBar和Drawer不会重建，所有主体页面会预加载，切换时直接显示已加载的页面。

示例代码：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  // 预存主体页面，避免切换时重建
  final List<Widget> _bodyPages = const [
    Screen1(),
    Screen2(),
    Screen3(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("固定导航栏")),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text("侧边栏")),
            ListTile(
              title: const Text("页面1"),
              onTap: () {
                setState(() => _currentIndex = 0);
                Navigator.pop(context); // 切换后关闭Drawer
              },
            ),
            ListTile(
              title: const Text("页面2"),
              onTap: () {
                setState(() => _currentIndex = 1);
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: _bodyPages,
      ),
    );
  }
}

适合页面数量较少的场景，若页面过多可改用懒加载方案。

方案二：PageView+AutomaticKeepAliveClientMixin #

适合需要滑动切换页面，同时希望未显示页面懒加载、已显示页面保活的场景：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final PageController _pageController = PageController();
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("固定导航栏")),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text("侧边栏")),
            ListTile(
              title: const Text("页面1"),
              onTap: () {
                _pageController.jumpToPage(0);
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text("页面2"),
              onTap: () {
                _pageController.jumpToPage(1);
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) => setState(() => _currentIndex = index),
        children: const [
          KeepAliveScreen1(),
          KeepAliveScreen2(),
        ],
      ),
    );
  }
}

// 子页面需混入AutomaticKeepAliveClientMixin实现保活
class KeepAliveScreen1 extends StatefulWidget {
  const KeepAliveScreen1({super.key});

  @override
  State<KeepAliveScreen1> createState() => _KeepAliveScreen1State();
}

class _KeepAliveScreen1State extends State<KeepAliveScreen1> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启保活

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    return const Center(child: Text("页面1内容"));
  }
}

方案三：状态管理+条件渲染 #

如果需要根据业务逻辑动态切换内容，可借助状态管理工具（如Provider、Riverpod）维护当前页面状态，父页面根据状态渲染对应内容：

示例（基于Riverpod）：

// 定义全局状态
final currentPageProvider = StateProvider<int>((ref) => 0);

class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final currentIndex = ref.watch(currentPageProvider);
    return Scaffold(
      appBar: AppBar(title: const Text("固定导航栏")),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text("侧边栏")),
            ListTile(
              title: const Text("页面1"),
              onTap: () {
                ref.read(currentPageProvider.notifier).state = 0;
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text("页面2"),
              onTap: () {
                ref.read(currentPageProvider.notifier).state = 1;
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: switch(currentIndex) {
        0 => const Screen1(),
        1 => const Screen2(),
        _ => const SizedBox(),
      },
    );
  }
}

若需避免主体页面重建，可结合AutomaticKeepAliveClientMixin使用。

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