【Flutter】Flutter 如何获取当前路由

文章目录

• • 一、前言
  • 二、Flutter 路由基础知识
  • • 1. 什么是路由
    • 2. Flutter 中的路由管理
  • 三、如何在 Flutter 中获取当前路由
  • • 1. 使用 NavigatorState 类
    • 2. 使用 ModalRoute 类
  • 四、代码示例
  • • 1. 一个简单的获取当前路由的例子
    • 2. 实际业务场景中获取当前路由的例子
  • 五、完整可运行的代码示例
  • 六、总结

一、前言

获取当前路由的信息可以帮助我们更好地理解用户的行为和应用的状态。例如，我们可能需要知道用户是从哪个页面跳转到当前页面的，或者在用户执行某些操作时我们可能需要了解当前的路由状态以便做出相应的响应。

如果你想深入学习 Flutter，掌握更多的技巧和最佳实践，我有一个好消息要告诉你：我们有一个全面的 Flutter专栏->Flutter Developer 101 入门小册 等待着你。在那里，你将获得完整的、系统的 Flutter 学习资料，包括详细的代码示例和深入的概念解析。更重要的是，我们的专栏正在不断更新和完善，而价格也会随着内容的丰富而逐渐上调。所以，现在加入，你将以最优惠的价格获得所有的内容。现在，让我们开始今天的学习吧！

二、Flutter 路由基础知识

1. 什么是路由

在 Flutter 中，路由（Route）通常被用来描述一个应用的屏幕或页面。在用户与应用交互过程中，屏幕的变化（比如从一个页面跳转到另一个页面）就是通过路由来管理的。

2. Flutter 中的路由管理

Flutter 提供了 Navigator 组件来管理路由。Navigator 使用栈结构来管理活动路由（也就是用户可以看到的页面）。新的路由页面会被推送（push）到栈上，当用户返回时，路由页面会从栈上弹出（pop）。

三、如何在 Flutter 中获取当前路由

1. 使用 NavigatorState 类

在 Flutter 中，我们可以通过 NavigatorState 类的 context 属性来获取当前路由。这个属性返回一个 BuildContext 对象，我们可以通过它来获取当前路由。

以下是一段示例代码：

BuildContext context = Navigator.of(context);Route currentRoute = ModalRoute.of(context);print('当前路由是：${currentRoute.settings.name}');

2. 使用 ModalRoute 类

除了 NavigatorState，我们还可以使用 Flutter 提供的 ModalRoute 类来获取当前路由。ModalRoute 类的 of 方法可以返回当前的 Route 对象。

以下是一段示例代码：

Route currentRoute = ModalRoute.of(context);print('当前路由是：${currentRoute.settings.name}');

四、代码示例

1. 一个简单的获取当前路由的例子

以下是一个简单的例子，演示了如何在 Flutter 中获取当前路由：

void printCurrentRoute(BuildContext context) {  Route currentRoute = ModalRoute.of(context);  print('当前路由是：${currentRoute.settings.name}');}

2. 实际业务场景中获取当前路由的例子

在实际的业务逻辑中，我们可能需要在用户点击按钮或者触发某些事件时获取当前的路由。以下是一个例子，演示了如何在用户点击按钮时获取当前路由

class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      initialRoute: '/',      routes: {        '/': (context) => HomePage(),        '/second': (context) => SecondPage(),      },    );  }}class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text('主页')),      body: Center(        child: FlatButton(          child: Text('点击我！'),          onPressed: () {            Route currentRoute = ModalRoute.of(context);            print('当前路由是：${currentRoute.settings.name}');            // 此处我们假设有一个 api 调用，注释中写明调用 API 的逻辑            // 调用 API，参数为 currentRoute.settings.name          },        ),      ),    );  }}class SecondPage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text('第二页')),      body: Center(        child: Text('这是第二页'),      ),    );  }}

在这个示例中，我们有两个页面，一个是主页，一个是第二页。在主页中，我们有一个按钮，当用户点击按钮时，会获取当前的路由并打印出来。同时，我们假设在这里有一个 API 调用，我们将当前的路由作为参数传递给 API。

五、完整可运行的代码示例

对于完整可运行的代码示例，你可以直接将上面的代码拷贝到你的 Flutter 项目中，并运行。你可以看到，当你点击 “点击我！” 按钮时，控制台会打印出当前路由的名称。

import 'package:flutter/material.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      initialRoute: '/',      routes: {        '/': (context) => HomePage(),        '/second': (context) => SecondPage(),      },    );  }}class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text('主页')),      body: Center(        child: FlatButton(          child: Text('点击我！'),          onPressed: () {            Route currentRoute = ModalRoute.of(context);            print('当前路由是：${currentRoute.settings.name}');            // 此处我们假设有一个 API 调用，注释中写明调用 API 的逻辑            // 调用 API，参数为 currentRoute.settings.name          },        ),      ),    );  }}class SecondPage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text('第二页')),      body: Center(        child: Text('这是第二页'),      ),    );  }}

六、总结

本文介绍了如何在 Flutter 中获取当前路由，我们介绍了两种方法，一种是使用 NavigatorState 类，另一种是使用 ModalRoute 类。我们还提供了一些代码示例来帮助你理解如何在实际的应用中获取和使用当前路由。

如果你对 Flutter 感兴趣，想要更深入地学习，那么我要推荐你一个很棒的资源：我们的 Flutter专栏->Flutter Developer 101 入门小册。在那里，你将获得完整的、系统的 Flutter 学习资料，包括详细的代码示例和深入的概念解析。比如，你知道如何使用 Flutter 构建一个完整的应用吗？在我们的专栏中，你将找到答案。更重要的是，我们的专栏正在不断更新和完善，而价格也会随着内容的丰富而逐渐上调。所以，现在加入，你将以最优惠的价格获得所有的内容。让我们一起在 Flutter 的世界中继续探索吧！如果你想了解更多，可以先阅读我们的 一站式解决你的需求，Flutter Developer 101 入门小册 专栏指引。

来源地址：https://blog.csdn.net/diandianxiyu/article/details/131213263