Flutter使用Drawer跳转如何复用已有页面实例 实现CupertinoTabBar同等效果

以下三种方案均可实现和CupertinoTabBar一致的页面复用、状态保留效果，可根据业务场景选择： #

方案1：使用IndexedStack实现页面复用（最简单） #

该方案和CupertinoTabBar底层实现逻辑完全一致，提前将所有需要复用的页面对象放入IndexedStack中，Drawer点击时仅切换展示索引，不触发任何路由跳转操作，所有页面状态会完整保留，不会触发重复构建。
代码示例：

int _currentIndex = 0;
// 提前初始化所有需要复用的页面实例
final List<Widget> _pages = [
  HomePage(),
  MessagePage(),
  SettingsPage(),
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    drawer: MyDrawer(
      onItemTap: (index) {
        setState(() {
          _currentIndex = index;
        });
        // 关闭抽屉
        Navigator.pop(context);
      },
    ),
    body: IndexedStack(
      index: _currentIndex,
      children: _pages,
    ),
  );
}

适用场景：页面数量较少（5个以内）的场景，缺点是首次加载时会初始化所有页面，页面数量过多会影响首开性能。 #

方案2：使用PageView + AutomaticKeepAliveClientMixin（懒加载高性能） #

该方案实现了页面懒加载，仅在首次打开对应页面时才会初始化，之后页面状态会永久保留，不会被销毁重建，性能优于IndexedStack，是工业界主流实现方案。
实现步骤：

• 所有需要保活的页面混入AutomaticKeepAliveClientMixin，重写wantKeepAlive返回true
• 外层用PageView承载所有页面，禁用左右滑动切换
• Drawer点击时调用PageController.jumpToPage切换页面即可
  代码示例：

// 单页面侧实现保活逻辑
class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用父类方法
    // 此处返回你的页面内容
  }
}

// 外层容器实现
final PageController _pageController = PageController();
final List<Widget> _pages = [HomePage(), MessagePage(), SettingsPage()];
int _currentIndex = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    drawer: MyDrawer(
      onItemTap: (index) {
        _currentIndex = index;
        _pageController.jumpToPage(index);
        Navigator.pop(context);
      },
    ),
    body: PageView(
      controller: _pageController,
      physics: const NeverScrollableScrollPhysics(), // 禁止滑动切换
      children: _pages,
    ),
  );
}

适用场景：页面数量多、对首开性能有要求的常规业务场景。 #

方案3：基于Navigator 2.0（Router API）自定义路由栈 #

如果你需要保留原生路由跳转的交互逻辑（比如页面过渡动画、系统返回键的默认行为），可以使用Navigator 2.0自定义路由栈管理逻辑：

• 全局维护路由实例池，记录所有已经创建过的页面路由实例
• Drawer点击时判断目标路由是否已存在于实例池：
  • 存在：直接调整路由栈顺序，将目标路由移到栈顶展示，其他路由实例保留不销毁
  • 不存在：创建新的路由实例加入栈顶和实例池
    该方案自由度最高，可完全复现CupertinoTabBar的路由复用逻辑，但实现成本较高，适合复杂路由场景使用。

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