第五十五回:命名路由(Route)

news/2025/2/11 8:40:22/

文章目录

  • 概念介绍
  • 知识回顾
  • 使用方法
  • 示例代码

我们在上一章回中介绍了BoxDecoration Widget相关的内容,本章回中将介绍命名路由(Route).闲话休提,让我们一起Talk Flutter吧。

概念介绍

我们在这里介绍的命名路由是路由(Route)中的一种,主要用来当作导航,通过导航跳转到不同的页面,它和我们前面章回中介绍的路由类似,只不过是给路由添加了名字,因此叫命名路由,有了名字后就可以直接通过名字来使用路由。

当然了命名路由的使用还是需要Navigator配合才可以,通常是它充当Navigator中某个方法的参数。常用的方法是pushNamed()方法。在此,大家先对命名路由有个大概的了解,本章回中将详细介绍它的使用方法。

知识回顾

在Flutter中每个StatefulWidget或者StatelessWidget都有一个路由栈,这个路由栈通过Navigator来管理,使用Navigator的of()方法可以获取到当前页面所在的路由栈,

  • 如果想从当前页面跳转到其它页面,那么使用Navigator的push()方法,相当于把其它页面压入当前页面的路由栈;
  • 如果从当前页面返回上一级页面,那么使用Navigator的pop()方法,相当于把当前页面从路由栈中弹出,然后显示路由栈顶部的页面,也就是当前页面的上一级页面。

Navigator的push/pop()方法需要使用Router类对象充当参数,常用的是Router类的子类:MaterialPageRoute。该类有一个WidgetBuilder类型的必选参数,WidgetBuilder类型本质上是
一个方法类型,它会返回一个Widget对象,这个对象就是压入或者弹出路由栈的页面。这里先做文字性描述,如果大家不理解的话可以看示例代码。

使用方法

  • 1.创建命名路由。具体做法为:在MaterialApp的routes属性中创建命名路由;
  • 2.创建路由的语法:routeName: WidgetBuilder对象
  • 3.使用命名路由进行导航,具体用法为:Navigator.pushNamed(routeName);

关于第二步中的内容大家可能不理解,我们给一个示例代码:

"/route1": (context)=> DiyWidget();

代码中的route1是命名路由的名字,名字前面的反斜线是根路由,它默认的页面是home属性对应的页面,如果不想使用默认值,也可以使用"/"来指定,或者使用initialRouter属性指定根路由。

箭头是个语法糖,箭头前后的内容合在一起是一个方法,方法的参数是context,方面的内容是返回一个DiyWidget类型的对象。这个方法其实就是WidgetBuilder类型,我们在上一小节中介绍过该类型,它是MaterialPageRoute构造方法中的参数类型。看到这里大家就会明白,命名路由就是给普通路由起了个名字,背后的原理和普通路由完全相同。

示例代码

ListTile(leading: Icon(Icons.message),title: Text("Messages"),//点击这个条目跳转到其它页面r,onTap: () {//使用普通路由// Navigator.of(context).push(//   MaterialPageRoute(builder: (context){//     return ExButton();//   })// );//下面代码是上面代码的语法糖式写法// Navigator.of(context).push(//   MaterialPageRoute(builder: (context) => ExButton())// );//使用命名路由Navigator.pushNamed(context,"/ButtonExample");},
),

我们在上面的代码中演示了普通路由和传统路由的使用方法,同时把路由封装到了ListTile中的onTap()方法里面,运行程序进点击List中的图标就可以通过路由实现页面跳转。我在这里就是不演示程序的运行结果了,建议大家自己动手去实践。

看官们,关于命名路由相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!


http://www.ppmy.cn/news/445372.html

相关文章

大数据Doris(四十四):kafka json 数组格式数据导入到Doris

文章目录 kafka json 数组格式数据导入到Doris 一、创建 Doris 表 二、创建 Kafka topic

给孩子买台灯什么牌子好?盘点儿童灯具品牌排行榜

孩子们就是祖国的栋梁,从古至今,我们对于孩子的教育是愈加重视,但发现现在很多的孩子戴上了眼镜,数据显示,我国近视率逐渐趋向低龄化。 通过研究发现,不良的用眼习惯、学习环境是导致学生视力下降的重要原因…

【编译、链接、装载七】目标文件里的变量和常量都存储在哪儿?(全局变量、局部变量、static、const、define)

【编译和链接七】目标文件里的变量和常量都存储在哪儿?(全局变量、局部变量、static、const、define) 一、变量1、全局变量1.1、全局变量存储在数据区.data 2、局部变量2.1、局部变量存储在代码区.text——也就是栈上 3、static变量3.1、全局…

EXCEL 懒人,节约时间,摸鱼小技巧-1

在excel 表格里显示小红1笔,小明2笔,小月3笔,小李4笔,小亮5笔 在一个格子内显示 A1&B1&"笔,"&A2&B2&"笔,"&A3&B3&"笔,"&A4&B4&"笔,"&am…

接口接收中文出现%E9%9D%92%E6%B5%B7%E7%9C%81%E6%B5%B7%E8%A5%BF%E

乱码问题: URL转义URLDecoder.decode("%E9%9D%92%E6%B5%B7%E7%9C%81%E6%B5%B7%E8%A5%BF%E8%92%99%E5%8F%A4%E6%97%8F%E8%97%8F%E6%97%8F%E8%87%AA%E6%B2%BB%E5%B7%9E%E9%83%BD%E5%85%B0%E5%8E%BFG6%28%E4%BA%AC%E8%97%8F%E9%AB%98%E9%80%9F%29","utf…

常用usb type c插座引脚图和功能差异

全功能的usb type-c插座的引脚定义如下: 在实际应用中,为力简化设计和降低成本,会进行一些裁剪,形成几种常见的插座分类: 8pin(不包含定位脚) 如图所示,对照标准引脚的定义,可以看…

url %E4%BD%A0%E5%A5%BD 编码问题

url链接粘贴下来后通常会出现类似%E4%BD%A0%E5%A5%BD的编码,一般来说一个中文字对应三个%编码的是utf-8, 一个中文字对应两个%编码的是GB2312。 还可以在http://tool.chinaz.com/tools/urlencode.aspx 这个网站上进行解码测试。在这里%E4%BD%A0%E5%A5%BD是utf-8 你…

html b5纸尺寸,b5纸的大小?

B5纸的大小是18.2cm*25.7cm,也就是说B5纸是182*257毫米 32开 B5一般有两种尺寸,EXTRA也就是标准的就是20.1cmX27.6cm 还有一种是18.2cmX25.7cm A4纸是多少开的?这要从纸张的制作说起,纸张的规格是指纸张制成后,经过修整…