Flutter中的页面跳转

zhangxingchao
204 阅读3分钟

Flutter中的路由

层次关键词典型调用解决的痛点
① 原生 Navigator APIpush / pop / pushReplacementNavigator.push(context, ...)必须手握 context，路由增删要自己写
② 路由表 + 命名路由routes / onGenerateRouteNavigator.of(context).pushNamed('/detail')统一管理路径；但依旧传 context，状态注入麻烦
③ 路由框架（GetX、go_router…）Get.to / offAll / argumentsGet.to(Page()) 、Get.offAllNamed(Routes.MAIN)把 导航、依赖注入、URL 映射、生命周期 收拢到一起；脱离 context

1. Navigator 的基础三件套

对象本质记住一句话
NavigatorStatefulWidget，内部维护一条 List<Route> 栈“Flutter 的 Activity 栈”
Route「一次页面切换」的数据结构push 就是 stack.add(route)，pop 就是 removeLast()
BuildContext找到最近的 NavigatorState 的钥匙生命周期短，写 DAO/单例时往往拿不到

2 . 纯 原生 Navigator（不依赖第三方框架）

场景原生 Navigator 方案代码示例
在 Widget 内部跳转Navigator.push / pop 直接用 contextdart<br>// 进入详情页<br>Navigator.push(<br> context,<br> MaterialPageRoute(builder: (_) => DetailPage(id: 42)),<br>);<br>
切换根路由并清空栈 （登录成功 / 退出登录）pushNamedAndRemoveUntil 或 pushReplacementdart<br>// 登录成功后，只保留首页<br>Navigator.of(context).pushNamedAndRemoveUntil(<br> '/home', // 目标路由<br> (_) => false, // 清空旧栈<br>);<br>
在 DAO / Service 等非-Widget 层跳转给 MaterialApp 配置全局 GlobalKey<NavigatorState> ，随后用 navKey.currentState 操作dart<br>// 入口文件<br>final navKey = GlobalKey<NavigatorState>();<br><br>runApp(MaterialApp(<br> navigatorKey: navKey,<br> routes: {<br> '/login': (_) => const LoginPage(),<br> '/home' : (_) => const HomePage(),<br> },<br>));<br><br>// DAO 中<br>navKey.currentState?.pushNamed('/login');<br>
传递 / 接收参数 & 返回值① pushNamed + settings.arguments ② pop(result)dart<br>// 发送参数<br>Navigator.pushNamed(<br> context,<br> '/detail',<br> arguments: {'id': 42},<br>);<br><br>// 接收参数<br>final args = ModalRoute.of(context)!.settings.arguments as Map;<br><br>// 带返回值的跳转<br>final result = await Navigator.push(...);<br>
自定义转场动画PageRouteBuilderdart<br>Navigator.of(context).push(<br> PageRouteBuilder(<br> pageBuilder: (_, __, ___) => const NewPage(),<br> transitionsBuilder: (_, anim, __, child) =><br> FadeTransition(opacity: anim, child: child),<br> ),<br>);<br>

A. 最常见的三种跳转

// 1. 普通 push
Navigator.push(context,
    MaterialPageRoute(builder: (_) => const DetailPage()));

// 2. pushReplacement（把当前页踢掉）
Navigator.pushReplacement(context,
    MaterialPageRoute(builder: (_) => const HomePage()));

// 3. pushNamedAndRemoveUntil（清空旧栈）
Navigator.of(context)
    .pushNamedAndRemoveUntil('/login', (Route<dynamic> route) => false);

B. 使用全局 navigatorKey 脱离 context

final GlobalKey<NavigatorState> navKey = GlobalKey<NavigatorState>();

void main() {
  runApp(MaterialApp(
    navigatorKey: navKey,
    routes: {
      '/': (_) => const SplashPage(),
      '/home': (_) => const HomePage(),
      '/login': (_) => const LoginPage(),
    },
  ));
}

// DAO / Service 里直接调用
Future<void> logout() async {
  // …清理 token…
  navKey.currentState?.pushNamedAndRemoveUntil('/login', (_) => false);
}
  • navigatorKey 只提供 Navigator 的操作权，不会持有 BuildContext，因此不会导致内存泄漏。
  • 对需要 BuildContext 的组件（showDialog、ScaffoldMessenger.of 等）仍然建议在 Widget 层调用。

3. GetX 路由核心 API 与对应原生操作

NavigatorUtil 封装等价原生写法说明
Get.to(Page())Navigator.push(context, MaterialPageRoute(...))普通 push
Get.back()Navigator.pop(context)返回
Get.offAll(Page())pushNamedAndRemoveUntil('/', (r) => false)清空栈 后推入新页
Get.offAllNamed('/home')同上，但用路由名保证依赖注入 (Bindings) 不被销毁
Get.offNamed('/login')pushReplacementNamed用新页替换当前页
Get.to(Page(), arguments: {...})push + 自己写 ModalRoute.of(context).settings.arguments传参更简洁
Get.to(Page(), preventDuplicates: true)判断栈顶后再 push避免重复跳转

结论： GetX 把 上下文查找、动画默认值、栈检查 等细节都包了，我们才可以在 DAO、Interceptor 里一句 Get.offAllNamed(Routes.LOGIN) 完成登出等类似的操作。

4. 路由表、依赖注入与中间件

class AppPages {
  static final routes = [
    GetPage(
      name: Routes.MAIN,
      page: () => const MainPage(),
      binding: MainBinding(),            // ← 在进入页面前注入 Controller/Service
    ),
    GetPage(
      name: Routes.LOGIN,
      page: () => const LoginPage(),
      middlewares: [AuthGuard()],        // ← 路由守卫，未登录重定向
    ),
    GetPage(
      name: Routes.WEB,
      page: () => HiWebView(),           // ← WebView 共用 1 份组件
    ),
  ];
}
  • binding：页面销毁时自动 dispose ViewModel；offAllNamed 不会丢失状态。
  • middlewares：统一做鉴权、打点、动态改主题。
  • 深链 / Web URL：Get.parameters['id'] 就能拿到 /detail?id=123 里的参数。 |

5. 示例

void main() {
  runApp(GetMaterialApp(
    initialRoute: Routes.LOGIN,
    getPages: AppPages.routes,
    defaultTransition: Transition.fade,
    navigatorKey: Get.key,        // 让非 Widget 也能导航
  ));
}

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('登录'),
          onPressed: () {
            // 保存 token...
            NavigatorUtil.goToHome();
          },
        ),
      ),
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: const Text('首页')),
        body: Center(
          child: ElevatedButton(
            child: const Text('登出'),
            onPressed: NavigatorUtil.goToLogin,
          ),
        ),
      );
}

⚡ 总结一句话

原生 Navigator = 栈数据结构 + 依赖 BuildContext
GetX / go_router 等路由框架 = 在此之上做了“无 context 调用 + 路由表 + 依赖注入 + 中间件”的全家桶。

NavigatorUtil.goToHome();  // 或 Get.offAllNamed(Routes.MAIN)
avatar
文章
阅读
粉丝