Flutter Web：如何实现带嵌套路由的持久化侧边栏？

核心问题原因 #

当前实现通过selectedIndex切换一级页面，但嵌套页面若使用常规导航（如Get.to()）会直接替换整个页面栈，导致包含侧边栏的HomePage被移除，进而丢失侧边栏。所有页面必须在HomePage的内容区域内渲染，而非作为独立页面跳转。

解决方向与代码改造 #

1. 扩展Getx控制器，支持嵌套页面管理 #

修改MyMenuController，新增可观察变量存储当前内容页面，替代单一的selectedIndex，同时支持菜单切换与嵌套页面跳转：

class MyMenuController extends GetxController {
  final selectedIndex = 0.obs;
  // 存储当前内容区域的页面组件
  final currentPage = Rx<Widget>(const Page1());

  // 菜单切换页面方法
  void selectTab(int index) {
    selectedIndex.value = index;
    switch(index) {
      case 0:
        currentPage.value = const Page1();
        break;
      case 1:
        currentPage.value = const Page2();
        break;
      case 2:
        currentPage.value = const Page3();
        break;
      default:
        currentPage.value = Container();
    }
  }

  // 跳转到嵌套页面的方法
  void navigateToNestedPage(Widget page) {
    currentPage.value = page;
    // 可选：取消菜单选中状态
    // selectedIndex.value = -1;
  }
}

2. 修改HomePage内容区域渲染逻辑 #

移除原有的switch(selectedIndex)，改为监听currentPage变量，确保所有页面在内容区域内渲染：

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

  @override
  Widget build(BuildContext context) {
    final MyMenuController menuController = Get.put(MyMenuController());

    return Scaffold(
      appBar: AppBar(
        title: const Text('Side Menu Example'),
      ),
      body: Row(
        children: [
          Expanded(
            child: Container(
              color: Colors.blue,
              child: ListView(
                children: [
                  ListTile(
                    title: const Text('Page 1'),
                    selected: menuController.selectedIndex.value == 0,
                    onTap: () => menuController.selectTab(0),
                  ),
                  ListTile(
                    title: const Text('Page 2'),
                    selected: menuController.selectedIndex.value == 1,
                    onTap: () => menuController.selectTab(1),
                  ),
                  ListTile(
                    title: const Text('Page 3'),
                    selected: menuController.selectedIndex.value == 2,
                    onTap: () => menuController.selectTab(2),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: Container(
              color: Colors.white,
              // 监听currentPage动态渲染页面
              child: Obx(() => menuController.currentPage.value),
            ),
          ),
        ],
      ),
    );
  }
}

3. 嵌套页面跳转示例（以Page1为例） #

嵌套页面中避免使用Get.to()，改用控制器的navigateToNestedPage方法：

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

  @override
  Widget build(BuildContext context) {
    final menuController = Get.find<MyMenuController>();
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Page 1'),
          ElevatedButton(
            onPressed: () {
              // 在内容区域打开嵌套页面，保留侧边栏
              menuController.navigateToNestedPage(const NestedPage1());
            },
            child: const Text('打开嵌套页面1'),
          ),
        ],
      ),
    );
  }
}

// 示例嵌套页面
class NestedPage1 extends StatelessWidget {
  const NestedPage1({super.key});

  @override
  Widget build(BuildContext context) {
    final menuController = Get.find<MyMenuController>();
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('嵌套页面1'),
          ElevatedButton(
            onPressed: () => menuController.selectTab(0),
            child: const Text('返回Page1'),
          ),
        ],
      ),
    );
  }
}

额外优化建议 #

• 若需支持嵌套页面返回栈，可在控制器中维护List<Widget>类型的页面栈变量，实现push/pop逻辑模拟原生导航栈。
• 如需结合GoRouter使用，可配置ShellRoute将侧边栏作为壳路由，所有页面作为子路由在壳路由的内容区域渲染，兼顾路由地址与侧边栏持久化。

内容的提问来源于stack exchange，提问作者who-aditya-nawandar