如何使用GetX实现Flutter嵌套（子）导航：Dashboard内切换子页面

1. 配置嵌套路由表 #

先在GetX路由配置中，将Dashboard设为主路由，把Products、Favourites、Orders注册为它的子路由，同时绑定各自的依赖：

class AppRoutes {
  static const String dashboard = '/dashboard';
  static const String products = '/dashboard/products';
  static const String favourites = '/dashboard/favourites';
  static const String orders = '/dashboard/orders';

  static final routes = [
    GetPage(
      name: dashboard,
      page: () => const DashboardPage(),
      binding: DashboardBinding(),
      // 注册子路由，绑定各自的依赖
      children: [
        GetPage(
          name: products,
          page: () => const ProductsPage(),
          binding: ProductsBinding(),
        ),
        GetPage(
          name: favourites,
          page: () => const FavouritesPage(),
          binding: FavouritesBinding(),
        ),
        GetPage(
          name: orders,
          page: () => const OrdersPage(),
          binding: OrdersBinding(),
        ),
      ],
    ),
  ];
}

2. 改造Dashboard页面结构 #

保留页眉和页脚，中间区域用GetNavigator渲染子路由内容，这样切换子路由时只会更新中间区域，页眉页脚保持固定：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 固定页眉
      appBar: AppBar(
        title: const Text('公司信息横幅'),
        backgroundColor: Colors.blue,
      ),
      body: Column(
        children: [
          // 中间主体：用GetNavigator渲染子路由
          Expanded(
            child: GetNavigator(
              initialRoute: AppRoutes.products,
            ),
          ),
          // 固定底部导航栏
          BottomNavigationBar(
            items: const [
              BottomNavigationBarItem(icon: Icon(Icons.shop), label: '商品'),
              BottomNavigationBarItem(icon: Icon(Icons.favorite), label: '收藏'),
              BottomNavigationBarItem(icon: Icon(Icons.list_alt), label: '订单'),
            ],
            onTap: (index) {
              switch (index) {
                case 0:
                  Get.toNamed(AppRoutes.products);
                  break;
                case 1:
                  Get.toNamed(AppRoutes.favourites);
                  break;
                case 2:
                  Get.toNamed(AppRoutes.orders);
                  break;
              }
            },
          ),
        ],
      ),
    );
  }
}

3. 绑定依赖示例 #

以Products的Binding为例，其他组件的Binding同理：

class ProductsBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<ProductsController>(() => ProductsController());
  }
}

4. 解决Get.toNamed()跳转问题 #

通过将子路由注册在Dashboard的children列表中，Get.toNamed()会自动识别为嵌套路由跳转，不会替换整个Dashboard页面。如果需要从外部页面直接跳转到Dashboard的某个子路由，直接调用完整路径即可：

Get.toNamed(AppRoutes.products);

轻量化替代方案：用Controller管理组件切换 #

如果不需要路由历史记录，可直接用GetX Controller管理当前显示的组件：

第一步：创建DashboardController #

class DashboardController extends GetxController {
  final currentPageIndex = 0.obs;

  void switchPage(int index) {
    currentPageIndex.value = index;
  }
}

第二步：在Dashboard中渲染组件 #

class DashboardPage extends GetView<DashboardController> {
  const DashboardPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('公司信息横幅')),
      body: Column(
        children: [
          Expanded(
            child: Obx(() {
              switch (controller.currentPageIndex.value) {
                case 0:
                  return const ProductsPage();
                case 1:
                  return const FavouritesPage();
                case 2:
                  return const OrdersPage();
                default:
                  return const ProductsPage();
              }
            }),
          ),
          BottomNavigationBar(
            currentIndex: controller.currentPageIndex.value,
            items: const [/* 导航项 */],
            onTap: controller.switchPage,
          ),
        ],
      ),
    );
  }
}

这种方式无需配置子路由，适合不需要路由栈的场景，组件的依赖可通过Get.put()或Binding单独初始化。

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