Flutter路由跳转父级页面向子页面传参及子页面向父级页面传参
Flutter中页面通过路由跳转传参主要分两种,一种是通过push()跳转时根据设定的参数进行传参,另一种是通过pop()返回时进行传参。
父级页面向子页面push()传参
假设从A页面跳到B页面可能需要携带参数userName和userAge这两个参数,那么需要在B页面先设置这两个参数名;假设userName必须填而userAge非必需,那么可以通过设置@required其为必填选项:
class PageB extends StatefulWidget {
@override
final userName;
final userAge;
const PageB({Key key,@required this.userName,this.userAge}) : super(key: key);
_PageBState createState() => _PageBState();
}
在A页面进行传参:
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return PageB(
userName: '灭霸',
userAge: '18岁',
);
}));
子页面向父级页面pop()传参
pop()传参是当页面B返回到页面A时,页面A通过.then()接收:
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return PageB(
userName: '灭霸',
userAge: '18岁',
);
})).then((userInfo){
setState(() {
backResult = userInfo;
});
});
在B页面中直接把需要传的参数放入pop()中即可:
String userInfo = '对不起,用户灭霸已阵亡!';
Navigator.of(context).pop(userInfo);
此时,我们已经完成了两边页面之间的一个交互,看一下最终效果:
最后附上A、B页面源码
pageA页面
import 'package:flutter/material.dart';
import 'package:test_app/page_b.dart'; class PageA extends StatefulWidget {
@override
_PageAState createState() => _PageAState();
} class _PageAState extends State<PageA> {
String backResult; @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('pageA',style: TextStyle(color: Colors.white,fontSize: 20),),
),
body: Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
RaisedButton(
child: Text('点击跳转B页面并传输用户信息'),
onPressed: (){
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return PageB(
userName: '灭霸',
userAge: '18岁',
);
})).then((userInfo){
setState(() {
backResult = userInfo;
});
});
}),
Text('${backResult}'),
],
),
),
);
} }
pageB页面
import 'package:flutter/material.dart'; class PageB extends StatefulWidget {
@override
final userName;
final userAge;
const PageB({Key key,@required this.userName,this.userAge}) : super(key: key);
_PageBState createState() => _PageBState();
} class _PageBState extends State<PageB> { @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('pageB',style: TextStyle(color: Colors.white,fontSize: 20),),
),
body: Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Text('用户名字:${widget.userName}'),
Text('用户年龄:${widget.userAge}'),
RaisedButton(
child: Text('返回页面A并通知灭霸阵亡消息'),
onPressed: (){
String userInfo = '对不起,用户灭霸已阵亡!';
Navigator.of(context).pop(userInfo);
}),
],
),
),
);
} }
Flutter路由跳转父级页面向子页面传参及子页面向父级页面传参的更多相关文章
- Flutter路由跳转及参数传递
本文要介绍的知识点 用路由推出一个新页面 打开新页面时,传入参数 参数的回传 路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者 ...
- flutter routes跳转
flutter可以通过push pop跳转到上一级或者下一级 基本push跳转方法 此时仍然有返回按钮 Navigator.push( context, MaterialPageRoute( buil ...
- 微信小程序 路由跳转 异步请求 存储数据,微信登录接口
1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...
- Flutter 路由 页面间跳转和传参 返回
Navigator Navigator用来管理堆栈功能(即push和pop),在Flutter的情况下,当我们导航到另一个屏幕时,我们使用Navigator.push方法将新屏幕添加到堆栈的顶部.当然 ...
- Flutter路由的跳转、动画与传参(最简单)
跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...
- react-router(v4) 路由跳转后返回页面顶部问题
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...
- flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...
- Extjs6(四)——侧边栏导航根据路由跳转页面
本文基于ext-6.0.0 之前做的时候这个侧边栏导航是通过tab切换来切换页面的,但是总感觉不太对劲,现在终于发现怎么通过路由跳转了,分享给大家,可能有些不完善的地方,望大家读后可以给些指点.欢迎留 ...
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...
随机推荐
- STL源码剖析 - RB-tree
在我看来,看源码是一件既痛苦又兴奋的事.当我们在推敲其中的难点时,是及其痛苦的,但当发现实现代码是那么丝滑简洁时,“wc, nb!”. 1. 导语 如果我们去看关联式容器map.set.multima ...
- redis目录
一.redis基础 二.django-redis 三.redis数据操作详解 四.redis持久化
- Go语言——值方法 & 指针方法
1 package main import ( "fmt" "sort" ) type SortableStrings []string type Sortab ...
- django 新项目
1.创建虚拟环境 mkvirtualenv - p python3 2.pycharm : 在pycharm中新建项目, 取名.添加虚拟机上的虚拟环境
- 【简易DFS/BFS+标记搜索次序的数组】zznu-2025 : 简单环路
2025 : 简单环路 时间限制:1 Sec 内存限制:128 MiB提交:145 答案正确:41 提交 状态 编辑 讨论区 题目描述 有一个N x M 大小的地图,地图中的每个单元包含一个大写字母. ...
- python 打印 str 字符串的实际内容 repr(str)
python 打印 str 字符串的实际内容 repr(str) s = 'aa' print(repr(s))
- Selenium(四)使用xpath定位元素
1.什么是xpath: 2.xpath的节点类型 3.xpath的表达式 4.开始定位 浏览器打开本地文件: (python3.7的打开语法) 查找根节点: (绝对路径)查找子节点: 查找type ...
- hexo主题next 7.X版本配置美化
我们主要对next主题进行了如下配置操作.效果可以前往https://www.ipyker.com 查看. 也可以前往https://github.com/ipyker/hexo-next-theme ...
- python的变量命名规范
一.python变量名命名规则: 1.变量名通常由字母,数字,下划线组成; 2.数字不能作为变量名开头; 3.不能以python中的关键字命名; 4.变量名要有意义; 5.不要用汉字和拼音去命名; 6 ...
- zhengrui集训D1-D5笔记
Day_1 计数 它咕掉了 Day_1 序列数据结构 它咕掉了 Day_2 线性代数 高斯消元\Large{高斯消元}高斯消元 普通版:略 模质数:求逆 模合数:exgcd 逆矩阵\Large{逆矩阵 ...