Flutter开发中的路由参数处理
作者:岛上码农 发布时间:2023-06-21 04:27:48
Navigator 的 push 和 pop方法
Navigator 导航器的 push 和 pop 方法可以携带参数在页面间传递,其他变形的方法也一样。pushNamed 方法原型如下:
Future<T?> pushNamed<T extends Object?>(
String routeName, {
Object? arguments,
}) {
return push<T>(_routeNamed<T>(routeName, arguments: arguments)!);
}
除了 routeName 的命名路由以外,还有个可选参数 arguments 用于在路由页面传递参数。pop 方法也一样:
void pop<T extends Object?>([ T? result ]) {
//...
}
可以携带一个 result 回传到上级页面。
代码实现
我们使用一个列表跳转到详情页来演示路由参数获取(列表构建文章请看//www.jb51.net/article/213052.htm)。点击列表行时携带列表数据项的 id 跳转到详情页。从详情页返回时再把该 id 回传。列表项的 Widget 新增了一个 id属性,由构建列表时初始化得到。
class DynamicItem extends StatelessWidget {
final int id;
final String title;
final String imageUrl;
final int viewCount;
static const double ITEM_HEIGHT = 100;
static const double TITLE_HEIGHT = 80;
static const double MARGIN_SIZE = 10;
const DynamicItem(this.id, this.title, this.imageUrl, this.viewCount,
{Key key})
: super(key: key);
//...
}
列表的容器使用 GestureDetector 包裹,以便响应点击事件。 onTap 方法定义为一个 async 方法,以便使用 await 获取导航返回时的参数,并使用一个 SnackBar 显示返回的 id。这里 pushNamed 携带了一个 Map 对象将列表的 id传递到详情页。
@override
Widget build(BuildContext context) {
return GestureDetector(
child: Container(
margin: EdgeInsets.all(MARGIN_SIZE),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_imageWrapper(this.imageUrl),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_titleWrapper(context, this.title),
_viewCountWrapper(this.viewCount.toString()),
],
),
)
],
),
),
onTap: () async {
Map<String, dynamic> routeParams = {'id': id};
var arguments = await Navigator.of(context)
.pushNamed(RouterTable.dynamicDetail, arguments: routeParams);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("从动态${(arguments as Map<String, dynamic>)['id']}返回"),
));
},
);
}
这里还使用了一个 arguments变量 接收导航返回的参数,导航若有返回参数,会返回一个 Future 对象,使用 await 即可接收。然后在使用 as 转换为实际的类型进行使用。 在详情页中,Flutter 提供了一个ModalRoute的类从当前上下文获取路由配置参数,代码如下所示:
class DynamicDetail extends StatelessWidget {
const DynamicDetail({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
Map<String, dynamic> routeParams =
ModalRoute.of(context).settings?.arguments;
return WillPopScope(
child: Scaffold(
appBar: AppBar(
title: Text('动态详情'),
brightness: Brightness.dark,
),
body: Center(
child: Text("产品 id: ${routeParams['id']}"),
),
),
onWillPop: () async {
Navigator.of(context).pop({'id': routeParams['id']});
return true;
},
);
}
}
实际上这个ModalRoute.of(context).settings就是我们上一篇路由拦截中的onGenerateRoute的 settings 参数,因此假设我们需要增加额外的路由参数(例如全局参数),则可以在 onGenerateRoute 方法中重新组装路由参数。 这里有个地方需要注意,因为返回时要携带参数,因此我们需要拦截返回响应事件,这时候整个组件可以使用 WillPopScope 包裹,该方法带有两个参数:
child:子组件,即原有的页面组件;
onWillPop:返回前拦截处理,返回一个 Future<bool>对象,若为 false,则不会返回。若为 true,则返回上一级。这里我们调用了 携带参数的 pop 方法以便将参数回传。实际这里往往做一些其他处理,例如表单没有保存询问是否确认李可,还有广大电商的活动页询问你是“忍痛离开”或是“再看一会”的处理。
最终效果
最终运行效果如下图所示,详情页获取到了 id 参数,返回的时候也接收到了对应的 id。
来源:https://juejin.cn/post/6973135763743440927
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 界面中控件较多的话,每个控件都设置setOnClickListener(this)是很麻烦的,为此抽出了一个Context的扩展类:fun
- 平时写项目的时候,java之父叫我们多打日志,我们通常使用traceId和requestId来保存完整请求的链路日志,例如市面上的skywa
- 1.PDF文件简介PDF是可移植文档格式,是一种电子文件格式,具有许多其他电子文档格式无法相比的优点。PDF文件格式可以将文字、字型、格式、
- 前言上篇文章通过一个有header和footer的滚动控件(Viewgroup)学了下MeasureSpec、onMeasure以及onLa
- Java 线程池原理Executor框架的两级调度模型在HotSpot VM的模型中,Java线程被一对一映射为本地操作系统线程。JAVA线
- 一、概要介绍 本文要介绍的是Java中的transient关键字,transient是短暂的意思。对于transie
- 前言:java.util.Set接口和 java.util.List接口一样,同样继承自 Collection接口,它与
- 一、问题描述今天使用SDK Manager将Android SDK的版本更新到了Android 5.1的版本,eclipse创建androi
- 前言开发项目中需要进行单文件多文件的上传功能,下面演示的ApiResponse是自己分装的返回值,要根据自己的项目来完成。使用的mvvm框架
- 这篇文章主要介绍了break在scala和java中的区别解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- package org.load.u;import java.io.File;import java.util.LinkedHashMap;
- 1、返回字符串,Model传输数据/** * 返回String * @param m
- Java接口(interface)的概念及使用在抽象类中,可以包含一个或多个抽象方法;但在接口(interface)中,所有的方法必须都是抽
- 一、效果图:二、导入 jar 包1.由于这是大神写好封装起来的一个框架,所有我们使用前得先下载相关的 jar 包第一种:maven<!
- 建立工程前需要导入POI包。POI相关jar包下载地址:http://poi.apache.org/download.html1.解析.xl
- 本文实例讲述了Java使用excel工具类导出对象功能。分享给大家供大家参考,具体如下:package com.gcloud.common;
- 本文讲述了Android应用程序模型之应用程序,任务,进程,线程。分享给大家供大家参考,具体如下:大多数操作系统,在应用程序所寄存的可执行程
- using System.Drawing;using System.Drawing.Imaging;using System;using S
- 一. 依赖管理Ⅰ. 部分dependency导入时为啥不需要指定版本?我们创建项目时添加的依赖并没有帮我们指定版本号<>,那Sp
- 目录Fanout交换机模型RabbitMQ控制台操作新增两个队列绑定fanout交换机示例效果图核心代码消息发布消息订阅Fanout交换机模