Flutter GetX嵌套导航时修改URL且不刷新顶部栏与抽屉的方法

要实现切换页面时URL同步变更，同时保留AppBar和Drawer不刷新，你需要结合GetX的命名路由和嵌套导航能力，替代原来直接替换Widget的方式。以下是修改后的完整代码：

import 'package:get/get.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/home',
      // 配置命名路由与嵌套结构
      getPages: [
        GetPage(
          name: '/',
          page: () => const ShellScreen(),
          children: [
            GetPage(name: '/home', page: () => const HomeView()),
            GetPage(name: '/settings', page: () => const SettingsView()),
          ],
        ),
        // 重定向快捷路由到根路由嵌套页
        GetPage(name: '/home', page: () => const ShellScreen()),
        GetPage(name: '/settings', page: () => const ShellScreen()),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('App')),
      drawer: const MyDrawer(),
      // 用GetNavigator作为嵌套导航容器，子路由切换不影响父级Scaffold
      body: const GetNavigator(initialRoute: '/home'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: const Text('Home'),
            onTap: () {
              Get.toNamed('/home'); // 命名路由跳转同步URL
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: const Text('Settings'),
            onTap: () {
              Get.toNamed('/settings');
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Home Page'));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Settings Page'));
  }
}

关键修改说明： #

• 替换MaterialApp为GetMaterialApp：这是GetX路由系统的基础，支持命名路由与URL自动同步。
• 嵌套路由结构设计：将ShellScreen作为根路由容器，内部通过GetNavigator承载子页面，子路由切换时父级的AppBar和Drawer不会被重建。
• 改用命名路由跳转：抽屉点击事件使用Get.toNamed()触发跳转，自动同步URL为对应路径（如/home、/settings）。
• 移除手动Widget切换逻辑：路由系统自动管理页面状态，无需手动替换Widget，更符合Flutter和GetX的设计规范。

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