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路由跳转父级页面向子页面传参及子页面向父级页面传参的更多相关文章

  1. Flutter路由跳转及参数传递

    本文要介绍的知识点 用路由推出一个新页面 打开新页面时,传入参数 参数的回传 路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者 ...

  2. flutter routes跳转

    flutter可以通过push pop跳转到上一级或者下一级 基本push跳转方法 此时仍然有返回按钮 Navigator.push( context, MaterialPageRoute( buil ...

  3. 微信小程序 路由跳转 异步请求 存储数据,微信登录接口

    1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...

  4. Flutter 路由 页面间跳转和传参 返回

    Navigator Navigator用来管理堆栈功能(即push和pop),在Flutter的情况下,当我们导航到另一个屏幕时,我们使用Navigator.push方法将新屏幕添加到堆栈的顶部.当然 ...

  5. Flutter路由的跳转、动画与传参(最简单)

    跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...

  6. react-router(v4) 路由跳转后返回页面顶部问题

    遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...

  7. flutter中的路由跳转

    在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...

  8. Extjs6(四)——侧边栏导航根据路由跳转页面

    本文基于ext-6.0.0 之前做的时候这个侧边栏导航是通过tab切换来切换页面的,但是总感觉不太对劲,现在终于发现怎么通过路由跳转了,分享给大家,可能有些不完善的地方,望大家读后可以给些指点.欢迎留 ...

  9. 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面

    https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...

随机推荐

  1. K2 BPM_快消零售连锁行业门店选址解决方案_十年专注业务流程管理系统

    >>>业务流程管理软件选型攻略  快消零售连锁行业门店选址解决方案   业内有句名言:“门店最重要的是什么?第一是选址,第二是选址,第三还是选址” 选址是一个很复杂的综合性商业决策过 ...

  2. linux命令启动关闭firewalld防火墙,添加端口

    firewalld管理防火墙常用命令   1.查看防火墙的状态 [root@localhost HMK]# firewall-cmd --state 查看防火墙的运行状态 not running [r ...

  3. MUI底部导航栏切换效果

    首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/ho ...

  4. C#基础 类及常用函数【string 、Math 、DiteTime 、TimeSpan】

    一  string 类型 string str = "abcdefg"; str.Length  -  字符串长度,返回int类型 str.TrimStart()          ...

  5. 【Zookeeper】实现哨兵机制(选举策略)

    一.Master选举使用场景及结构 二.代码实现 2.1 Maven依赖信息 2.2 IndexController 2.3 MyApplicationRunner 2.4 ElectionMaste ...

  6. nginx__的简单搭建和 wsgi

    4 部署 1 配置 uwsig(配置文件) pip3 install uwsgi 1 mkdir uwsgi 2 cd uwsgi 3 touch test_uwsig.ini [uwsgi] # 指 ...

  7. 原生JS发送Ajax请求、JSONP

    一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...

  8. C指针的运算

    指针的运算在数组中才有意义 int *p; p++,一定是在一片连续的区域才有意义,当然越界也会带来诸多问题. void main() { ; int *p = &num;//这根本无界可言 ...

  9. C# 可观察集合

    static void Main() { var data = new ObservableCollection<string>(); data.CollectionChanged += ...

  10. 【极大化剪枝】Power Hungry Cows-C++【没有用A*!】【超级简单!】

    Description小KITTY想要快速计算整数P的幂 (1 <= P <=10,000),它们需要你的帮助.因为计算极大数的幂,所以它们同一时间仅能使用2个存储器,每个存储器可记录某个 ...