一文带你了解 Flutter 路由

简介: 一文带你了解 Flutter 路由

Flutter中的Navigator是用于管理页面路由的类。它可以帮助您在应用程序中导航到不同的屏幕或页面。

以下是Navigator的详细使用和动态路由与静态路由的区别:

功能

描述

静态路由

在编译时定义所有路由,并在需要导航时直接使用路由名称进行跳转。

动态路由

在运行时根据条件或用户操作来决定要导航到哪个页面,可以通过传递参数来自定义每个页面。

在Flutter中,静态路由是一种通过预定义的路由表来进行页面导航的方式。它使用路由名称作为标识符,并将每个路由名称映射到相应的页面组件。

动态路由

在Flutter中,动态路由是根据条件或用户操作来决定要导航到哪个页面,并可以通过传递参数来自定义每个页面。您可以使用Navigator.push方法和MaterialPageRoute来实现动态路由。

动态路由的常用API和示例代码:

API

描述

Navigator.push(context, MaterialPageRoute(builder: (context) => Screen()))

导航到指定的页面组件。

MaterialPageRoute(builder: (context) => Screen())

创建一个新的页面路由。

builder

定义页面组件的构建函数。

arguments

传递给目标页面的参数。

动态路由跳转

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => MyHomePage() ); 
);

MaterialPageRoute 创建了一个要导向的页面路由,另外我们可以通过往页面里传递参数来达到路由通信,前提是在跳转路由页面定义好接受的参数。

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => Test(title: '动态路由传递参数'),
  )
);
import 'package:flutter/material.dart';
import 'main.dart';
class Test extends StatelessWidget {
final String title;  //定义参数
const Test({super.key ,required this.title}); 
  @override
  Widget build(BuildContext context){
    return  Scaffold(
      body: Container(
        child: Column(
          children: [
            Text(title),
            ElevatedButton(
              child: Text('跳转到home页,并且传递参数'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyHomePage() )
                );
              },
            )
          ],
        )
      )
    );
  }
}

关于 Navigator.push

Navigator.push(context, MaterialPageRoute(builder: (context) => Screen())) 是在Flutter中用于导航到指定页面的常用方法。

这个方法的具体步骤如下:

  1. context 参数是当前上下文,它提供了访问路由和其他相关信息的能力。
  2. MaterialPageRoute 是一个页面路由对象,它负责创建新的页面并管理页面切换动画等细节。
  3. builder 是一个匿名函数,它定义了要构建的目标页面的内容。在这个函数中,您可以返回一个新的页面组件实例。
  4. Screen() 是目标页面的组件类,它将被实例化并显示在屏幕上。

当调用 Navigator.push(context, MaterialPageRoute(builder: (context) => Screen())) 时,以下操作将发生:

  1. Flutter会根据提供的context找到最近的Navigator对象。
  2. MaterialPageRoute将被创建,并使用提供的builder函数来构建目标页面的内容。
  3. 新的页面组件实例将被创建。
  4. 页面切换动画将被应用,将当前页面切换到目标页面。
  5. 目标页面将显示在屏幕上。

通过这种方式,您可以使用Navigator.push方法和MaterialPageRoute来实现页面之间的导航和切换。


静态路由

在Flutter中,静态路由是一种通过预定义的路由表来进行页面导航的方式。它使用路由名称作为标识符,并将每个路由名称映射到相应的页面组件。

Flutter中静态路由的常用API:

API

描述

MaterialApp

根部小部件,用于定义应用程序的基本配置和路由。

home

定义应用程序的初始页面。

routes

定义应用程序的静态路由映射表。

onGenerateRoute

定义应用程序的动态路由生成函数。

Navigator.pushNamed(context, routeName)

导航到指定名称的静态路由。

ModalRoute.of(context)?.settings.arguments

获取当前页面的传递参数。


使用静态路由步骤:

  1. MaterialApp小部件中设置routes属性,该属性接受一个Map<String, WidgetBuilder>类型的映射表,其中键是路由名称,值是对应页面的构建函数。

并且必须需要通过initialRoute 来指定初始路由。

@override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        // home: MyHomePage(),  这个就不需要了
        initialRoute: '/', //指定初始路由 / 对应的页面
        routes: {    //需要的跳转的路由放到 routes 数组里
        '/': (context) => MyHomePage(),
        '/tab': (context) => MyTab(),
      },
      ),
    );
  }
}
  1. 在需要导航到其他页面的地方,使用Navigator.pushNamed(context, routeName)方法来触发导航操作。routeName参数是目标页面的路由名称。
Navigator.pushNamed(context, '/tab');

⚠️注意: 静态路由不支持传递参数

请注意,静态路由不支持传递参数。在Flutter中,静态路由本身不直接支持传递参数。静态路由是通过预定义的路由表进行页面导航的方式,每个路由名称映射到相应的页面组件。

路由返回

Flutter中,可以使用Navigator.pop()方法来执行路由返回操作。该方法将从导航堆栈中移除当前页面,并返回到上一个页面。

// 在当前页面执行路由返回操作
Navigator.pop(context);


需要注意以下几点事项:

  1. context参数:context是BuildContext对象,通常可以在小部件的build方法中直接使用。如果您在其他地方使用Navigator.pop(),请确保传递正确的BuildContext对象。
  2. 返回值:Navigator.pop()方法可以返回一个值给上一个页面。您可以在调用Navigator.pop()时传递一个值作为返回值。
// 在当前页面执行路由返回操作,并传递一个值给上一个页面
Navigator.pop(context, '返回值');

在上一个页面,您可以通过await Navigator.push()方法获取返回的值。

  1. 路由返回动画:路由返回时,默认会应用一个过渡动画。您可以通过自定义过渡动画来改变返回时的动画效果。
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => NextPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(opacity: animation, child: child);
    },
  ),
);

在上述示例中,使用了PageRouteBuilder来自定义页面过渡动画,这里使用了一个淡入淡出的效果。

  1. 注意导航堆栈:在执行路由返回操作时,请确保导航堆栈中有足够的页面可供返回。如果导航堆栈为空,可能会导致异常或应用程序退出。您可以通过Navigator.canPop(context)方法检查是否可以执行路由返回操作。
if (Navigator.canPop(context)) {
  Navigator.pop(context);
}

这些是使用路由返回的常见用法和注意事项。请根据您的具体需求和应用场景进行适当的使用和处理。

关于MaterialApp 配置

MaterialApp是Flutter中的一个重要小部件,它作为应用程序的根部小部件,并提供了一些基本的配置和功能。

属性

描述

title

应用程序的标题,通常显示在任务管理器中或设备的应用程序切换器中。

home

应用程序的初始页面,通常是一个Widget

routes

定义应用程序的静态路由映射表,将路由名称映射到相应的页面组件。

onGenerateRoute

定义应用程序的动态路由生成函数,可以根据需要自定义路由处理逻辑。

navigatorKey

用于访问导航器的全局键,可以在应用程序的任何地方使用该键来执行导航操作。

initialRoute

指定应用程序的初始路由名称,如果设置了home属性,则忽略此属性。

onUnknownRoute

定义当导航到未知路由时的处理逻辑,可以显示错误页面或执行其他操作。

theme

应用程序的主题样式,包括颜色、字体和其他视觉属性。

darkTheme

应用程序的暗黑模式主题样式,可以与theme属性一起使用,根据系统设置自动切换主题。

themeMode

定义应用程序的主题模式,可以是ThemeMode.lightThemeMode.darkThemeMode.system

debugShowCheckedModeBanner

控制是否显示调试模式下的横幅标志,默认为true

这些属性使您能够配置应用程序的基本行为、外观和导航功能。通过使用MaterialApp,您可以创建一个遵循Material Design准则的Flutter应用程序,并轻松管理页面之间的导航。


相关文章
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
151 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。 我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。 我写了个 demo 今天我们就一起来看下这两个方法如何使用。
1668 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
|
10天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
85 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
|
Go 网络架构 开发者
Flutter &鸿蒙next中的路由使用详解【基础使用】
本文介绍了 Flutter 路由系统的使用方法,包括基本路由、命名路由、参数传递、返回参数和动态路由。通过 `Navigator` 类实现页面跳转,支持简单和复杂参数的传递,并可通过 `onGenerateRoute` 实现更灵活的动态路由管理。示例代码展示了如何在实际项目中应用这些技术,帮助开发者构建清晰、易于维护的导航结构。
112 1
|
4月前
|
UED 开发者
flutter:获取对象&路由管理 (四)
本文介绍了Flutter中如何通过Context获取状态对象、使用GlobalKey获取状态对象、基本的路由管理、路由传值、命名路由、返回根路由以及点击图标跳转的方法。示例代码展示了如何在应用中实现这些功能,包括页面跳转、传递参数和返回上一页等操作。
|
9月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
896 0
|
7月前
|
Android开发
Flutter路由跳转参数处理小技巧
Flutter路由跳转参数处理小技巧
59 0
|
9月前
|
前端开发 开发者 iOS开发
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
【4月更文挑战第30天】本文介绍了Flutter的路由管理与页面跳转,包括基本和命名路由管理。基本路由使用`Navigator`的`push`和`pop`方法,如`MaterialPageRoute`和`CupertinoPageRoute`。命名路由则通过路由表注册名称进行跳转,如`Navigator.pushNamed`。此外,还展示了如何通过构造函数、`arguments`和`PageRouteBuilder`进行路由传值。掌握这些知识能提升Flutter开发效率。
172 0
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
|
9月前
|
BI
Flutter笔记:路由观察者
Flutter笔记:路由观察者
356 0
|
9月前
|
UED
Flutter之自定义路由切换动画
Flutter之自定义路由切换动画 在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等。默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要自定义一些特殊的动画效果来提高用户体验。本文将介绍如何在Flutter中实现自定义的路由切换动画。
266 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 3
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
  • 6
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 7
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 1
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    39
  • 2
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    25
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    130
  • 4
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    27
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    68
  • 6
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    85
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    67
  • 8
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
    18
  • 9
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    23
  • 10
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    114