flutter路由跳转

Navigator.of(context).push(); //路由跳转(模块方式)

Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {return const Page() ;//Page()指页面},
))

Navigator.pushNamed(context, "/") //路由跳转(路由方式)

Navigator.pop(context)//返回上级

路由对象  widget

获取/使用路由参数 (widget.id / widget.title)     使用${widget.title}

1.基本路由

button按钮点击跳转示例(传参)

//button按钮点击事件  
//在button页面内引入Page 
//import './page.dart';
IconButton(onPressed: () => {Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context)=>const PageWidget(title:'小刀刀',id:12);))},icon: const Icon(Icons.keyboard_arrow_right), //设置图标
)//page页面
import 'package:flutter/material.dart';class PageWidget extends StatefulWidget {final String title;final int id;const PageWidget({super.key, this.title = "我是系统设置", required this.id});@overrideState<PageWidget> createState() => _PageWidgetState();
}class _PageWidgetState extends State<PageWidget> {String str = '';@overridevoid initState() {super.initState();//根据传递的id参数, 格式化数据str = "传递参数为${widget.id}";}@overrideWidget build(BuildContext context) {return Scaffold(floatingActionButton: FloatingActionButton(onPressed: () => Navigator.pop(context),child: const Icon(Icons.arrow_left_outlined),),appBar: AppBar(title: const Text("路由传参"),centerTitle: true,),body: Center(child: Text("${widget.title}:$str",style: const TextStyle(color: Colors.pink))),);}
}

2.命名路由-不携带参数

Navigator.pushNamed(context, "/") //路由跳转(路由方式)

在main.dart的MaterialApp的routes中配置整体路由 格式routes:{key:()=>Widget(),....}

initialRoute默认路由

//main.dart
void main() {runApp(MaterialApp(title: 'contaniner', initialRoute: "/", routes: {"/": (context) => const HomeWidget(),"/page": (context) => const PageWidget(),}));
}//home.dartimport 'package:flutter/material.dart';class HomeWidget extends StatefulWidget {const HomeWidget({super.key});@overrideState<HomeWidget> createState() => _HomeWidgetState();
}class _HomeWidgetState extends State<HomeWidget> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("首页"),centerTitle: true,),body: ElevatedButton(onPressed: () => Navigator.pushNamed(context, "/page"),child: const Text("我是命名路由"),),);}
}//page页面
import 'package:flutter/material.dart';class PageWidget extends StatefulWidget {const PageWidget({super.key});@overrideState<PageWidget> createState() => _PageWidgetState();
}class _PageWidgetState extends State<PageWidget> {@overrideWidget build(BuildContext context) {return Scaffold(floatingActionButton: FloatingActionButton(onPressed: () => Navigator.pop(context),child: const Icon(Icons.arrow_left_outlined),),appBar: AppBar(title: const Text("命名路由"),centerTitle: true,),body: Center(child: Text("我是Page页面")),);}
}

3.命名路由-传参

注意点:

A.创建路由Map

B.main.dart的MaterialApp添加onGenerateRoute

C.接收使用参数:

final Map arguments;

const PageWidget({super.key, required this.arguments });

print(widget.arguments);

//main.dart
import 'package:flutter/material.dart';
import './router/page.dart';
import './router/home.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {final Map _routerMap = {"/": (context) => HomeWidget(),"/page": (context, {arguments}) => PageWidget(arguments: arguments),};return MaterialApp(title: 'contaniner',initialRoute: "/",onGenerateRoute: (RouteSettings settings) {//settings.name 路由地址//settings.arguments  携带参数// 统一处理final String? name = settings.name;final Function? pageContentBuilder = _routerMap[name];if (pageContentBuilder != null) {if (settings.arguments != null) {final Route route = MaterialPageRoute(builder: (context) =>pageContentBuilder(context, arguments: settings.arguments));return route;} else {final Route route = MaterialPageRoute(builder: (context) => pageContentBuilder(context));return route;}}return null;},);}
}//home.dartimport 'package:flutter/material.dart';class HomeWidget extends StatefulWidget {const HomeWidget({super.key});@overrideState<HomeWidget> createState() => _HomeWidgetState();
}class _HomeWidgetState extends State<HomeWidget> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("首页"),centerTitle: true,),body: ElevatedButton(onPressed: () => Navigator.pushNamed(context, "/page",arguments: {"title": '我是命名路由传值', "id": 20}),child: const Text("我是命名路由传参"), //设置图标),);}
}//page.dart
import 'package:flutter/material.dart';class PageWidget extends StatefulWidget {//接收参数final Map arguments;const PageWidget({super.key, required this.arguments });@overrideState<PageWidget> createState() => _PageWidgetState();
}class _PageWidgetState extends State<PageWidget> {@overridevoid initState() {super.initState();// str = "传递参数为${widget.id}";print(widget.arguments);}@overrideWidget build(BuildContext context) {return Scaffold(floatingActionButton: FloatingActionButton(onPressed: () => Navigator.pop(context),child: const Icon(Icons.arrow_left_outlined),),appBar: AppBar(title: const Text("Page页面"),centerTitle: true,),body:  Text("${widget.arguments}"),);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/770745.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javaWeb网上订餐管理系统

一、简介 在当今社会&#xff0c;随着互联网的普及&#xff0c;网上订餐已经成为了人们生活中不可或缺的一部分。为了方便用户点餐&#xff0c;同时也方便商家管理订单&#xff0c;我设计了一个基于JavaWeb的网上订餐管理系统。该系统分为前台和后台两部分&#xff0c;前台包括…

ChatGPT助力论文写作:详细步骤解析

前言 在论文写作过程中&#xff0c;尽管人工智能工具如ChatGPT能为我们提供有效的辅助&#xff0c;但我们必须铭记&#xff0c;这些工具并不能完全取代我们的思考与判断能力。本指南将详尽地展示如何利用ChatGPT辅助论文写作的全过程&#xff0c;旨在帮助您更高效地完成学术任…

AI基础知识扫盲

AI基础知识扫盲 AIGCLangchain--LangGraph | 新手入门RAG&#xff08;Retrieval-Augmented Generation&#xff09;检索增强生成fastGPT AIGC AIGC是一种新的人工智能技术&#xff0c;它的全称是Artificial Intelligence Generative Content&#xff0c;即人工智能生成内容。 …

java实现https连接总是要报no cipher suites in common

遇到“no cipher suites in common”这样的错误通常意味着客户端和服务器之间没有共同支持的加密套件&#xff08;Cipher Suite&#xff09;。这个问题可能由多个原因引起&#xff0c;包括但不限于SSL/TLS配置错误、Java安全策略限制、客户端或服务器不支持的加密算法等。解决这…

企业产品网络安全建设日志3月25

文章目录 参与推行域名上线安全卡点背景处置 C系云安全认证准备WAF调试 参与推行域名上线安全卡点 背景 未经安全审核的上线动作&#xff0c;对企业的风险首先面临是外部审核的问题&#xff0c;一个企业有各种情况要接受外部的安全审计&#xff0c;各种受雇三方的机构会对公司…

uniapp的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件&#xff0c;全局页面路径配置&#xff0c;应用的状态栏、导航条、标题、窗口背景色设置等 main.js 入口文件&#xff0c;主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex&#xff0c;注意uniapp无法使用vue-router&#xff0c;路由须在pag…

[NKCTF 2024]web解析

文章目录 my first cms全世界最简单的CTF解法一解法二 my first cms 打开题目在最下面发现是CMS Made Simple&#xff0c;版本为2.2.19 扫一下发现存在后台登陆界面&#xff0c;直接访问 用字典爆破下admin的密码为Admin123 然后直接登录&#xff0c;去漏洞库搜一下其实存在…

Contos7 安装 Maven

Contos7 安装 Maven 前言 ​ Maven是一个用于构建和管理Java项目的强大工具。它提供了一种简单且一致的方式来构建、测试和部署项目&#xff0c;同时管理项目依赖关系。Maven基于项目对象模型&#xff08;Project Object Model&#xff0c;POM&#xff09;&#xff0c;使用XML…

前端理论总结(css3)——link/import区别 // 伪类/伪元素

伪类/伪元素 1&#xff1a; 伪类使用1个冒号&#xff0c;常见的有&#xff1a;:hover&#xff0c;:link&#xff0c;:active&#xff0c;:target&#xff0c;:not()&#xff0c;:focus等 伪元素使用 2 个冒号&#xff0c;常见的有&#xff1a;::before&…

后端常问面经之Java集合

HashMap底层原理 HashMap的数据结构&#xff1a; 底层使用hash表数据结构&#xff0c;即数组和链表或红黑树 当我们往HashMap中put元素时&#xff0c;利用key的hashCode重新hash计算出当前对象的元素在数组中的下标 存储时&#xff0c;如果出现hash值相同的key&#xff0c;此…

恒创科技:服务器反应慢如何解决?

​  通常来说&#xff0c;访问者会在最初的几秒钟内决定是留在您的网站还是离开。如果页面加载时间超过五秒&#xff0c;访问者离开的可能性就会增加 90%。所以&#xff0c;作为站长们&#xff0c;必须减少服务器响应时间&#xff0c;以确保其网站加载速度更快。以下是减少网…

Mac电脑虚拟显示器:BetterDisplay Pro for Mac v2.0.11激活版

BetterDisplay Pro是一款由waydabber开发的Mac平台上的显示器校准软件&#xff0c;可以帮助用户调整显示器的颜色和亮度&#xff0c;以获得更加真实、清晰和舒适的视觉体验。 软件下载&#xff1a;BetterDisplay Pro for Mac v2.0.11激活版 以下是BetterDisplay Pro的主要特点&…

蔚来JAVA面试(收集)

先叠加&#xff0c;这个是自己找的答案不一定对&#xff0c;只是给我参考看看而已。 一、项目 这个没有&#xff0c;根据实际项目情况来。蔚来比较喜欢拷打项目&#xff0c;所以要对项目非常熟悉&#xff08;慌&#xff09; 二、JAVA基础 2.1 Java中的IO模型有用到过吗&#…

python与excel第七节 拆分工作簿

一个工作簿中多个工作表拆分为多个工作簿 假设一个excle工作簿中有多个工作表&#xff0c;现在需要将每个工作表拆分为单独的工作簿。 例子&#xff1a; import xlwings as xw# 设置生成文件的路径path D:\\TEST\\dataIn# 源文件的路径workbook_name D:\\TEST\\dataIn\\产…

Android视角看鸿蒙第九课-鸿蒙的布局

鸿蒙的四大布局 导读 前面八篇文章描述了鸿蒙app的配置文件&#xff0c;关于版本号&#xff0c;开发版本&#xff0c;桌面图标等等配置方式。从这一篇文章开始学习鸿蒙的UI使用方式。 前面我们学习到鸿蒙有ability和page的区分&#xff0c;ability类似Activity但又不完全一样…

2024.3.25力扣(1200-1400)刷题记录

一、1784. 检查二进制字符串字段 1.使用0分割。分割出来的结果是含有“1”的串和空串。 class Solution:def checkOnesSegment(self, s: str) -> bool:# 使用0分割return sum(len(c) ! 0 for c in s.split("0")) < 1 2.遍历 class Solution:def checkOnesS…

如何使用PHP和RabbitMQ实现延迟队列(方式二)?

前言 前几天写了一篇关于PHP和RabbitMQ如何通过插件实现延迟队列的功能。 今天写另外一篇不需要插件的方式&#xff0c;使用RabbitMQ的死信队列&#xff08;Dead-Letter-Exchanges, DLX&#xff09;和消息TTL&#xff08;Time-To-Live&#xff09;。 这种方法涉及到设置消息…

2023.3.21日面腾讯云智研发公司面经

2023.3.21日面腾讯云智研发公司面经 1&#xff0c;先进行自我介绍 2&#xff0c;你是计科的&#xff0c;计网是必修的吗&#xff1f; 3&#xff0c;说一下两台服务器如何通信&#xff1f; 服务器A向服务器B进行三次握手&#xff0c;然后确认建立连接之后发送资源&#xff0…

java Web餐馆订单管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 餐馆订单管理系统是一套完善的web设计系统&#xff0c;对理解JSP java 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&#xff0c;使…

Django 异步生成器通过流式响应TypeError: ‘async_generator‘ object is not iterable

Django 异步生成器通过流式响应&#xff0c;本篇文章已解决 djagno项目的StreamingHttpResponse只支持响应迭代器&#xff0c;不支持异步生成器的方式去响应数据 默认情况会报错 TypeError: ‘async_generator‘ object is not iterable Traceback (most recent call last):…