Flutter参数的传递和接收
上次只写了方法和参数,这次写了完整的示例,页面间参数的传递和接收的示例。
1、参数传递
用在程序上解释就是比如你进入一个商品选择列表,当你想选择一个商品的具体信息的时候,你就要传递商品编号,详细页面接受到编号后,显示出不同的内容。
声明数据结构类
Dart中可以使用类来抽象一个数据,比如我们模仿一个商品信息,有商品标题和商品描述。我们定义了一个Product类,里边有两个字符型变量,title和description。
- title:是商品标题。
- description: 商品详情描述
class Product{
final String title; //商品标题
final String description; //商品描述
Product(this.title,this.description);
}
构建一个商品列表
作一个商品的列表,这里我们采用动态的构造方法,在主方法里传递一个商品列表(List)到自定义的Widget中。
先来看看主方法的编写代码:
import 'package:flutter/material.dart'; void main(){
runApp(MaterialApp(
title:'数据传递案例',
home:ProductList(
products:List.generate(
,
(i)=>Product('商品 $i','这是一个商品详情,编号为:$i')
),
)
));
}
上面的代码是主路口文件,主要是在home属性中,我们使用了ProductList,这个自定义组件,而且时候会报错,因为我们缺少这个组件。这个组件我们传递了一个products参数,也就是商品的列表数据,这个数据是我们用List.generate
生成的。并且这个生成的List原型就是我们刚开始定义的Product这个类(抽象数据)。
ProductList自定义组件的代码:
class ProductList extends StatelessWidget{
final List<Product> products;
ProductList({Key key,@required this.products}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text('商品列表')),
body:ListView.builder(
itemCount:products.length,
itemBuilder: (context,index){
return ListTile(
title:Text(products[index].title),
onTap:(){ }
);
},
)
);
}
}
先接受了主方法传递过来的参数,接受后用ListView.builder
方法,作了一个根据传递参数数据形成的动态列表。
参数的传递
还是使用Navigator
组件,然后使用路由MaterialPageRoute
传递参数,具体代码如下。
Navigator.push(
context,
MaterialPageRoute(
builder:(context)=>new ProductDetail(product:products[index])
)
);
子页面接受参数并显示
现在需要声明ProductDetail
这个类(组件),先要作的就是接受参数,具体代码如下。
class ProductDetail extends StatelessWidget {
final Product product;
ProductDetail({Key key ,@required this.product}):super(key:key); @override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title:Text('${product.title}'),
),
body:Center(child: Text('${product.description}'),)
);
}
}
接受了参数,并把数据显示在了页面中。
完成代码如下:
import 'package:flutter/material.dart'; //传递的数据结构,也可以理解为对商品数据的抽象
class Product{
final String title; //商品标题
final String description; //商品描述
Product(this.title,this.description);
} void main(){
runApp(MaterialApp(
title:'数据传递案例',
home:ProductList(
products:List.generate(
,
(i)=>Product('商品 $i','这是一个商品详情,编号为:$i')
),
)
));
} class ProductList extends StatelessWidget{
final List<Product> products;
ProductList({Key key,@required this.products}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text('商品列表')),
body:ListView.builder(
itemCount:products.length,
itemBuilder: (context,index){
return ListTile(
title:Text(products[index].title),
onTap:(){
Navigator.push(
context,
MaterialPageRoute(
builder:(context)=>new ProductDetail(product:products[index])
)
);
}
);
},
)
);
}
} class ProductDetail extends StatelessWidget {
final Product product;
ProductDetail({Key key ,@required this.product}):super(key:key); @override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title:Text('${product.title}'),
),
body:Center(child: Text('${product.description}'),)
);
}
}
也可以如下方式,效果是一样的:
import 'package:flutter/material.dart'; class Product{//抽象类
final String title; //商品标题
final String description; //商品描述
Product(this.title,this.description);
} class ProductList extends StatefulWidget{
//接收参数
final List<Product> products;
ProductList({Key key,@required this.products}):super(key:key); @override
State<StatefulWidget> createState() {
return new ProductListState();
}
} class ProductListState extends State<ProductList>{ final products = List.generate(
, (i)=>Product('商品 $i','这是一个商品详情,编号为:$i')
); @override
Widget build(BuildContext context) {
return Scaffold( //可以直接用return Scaffold()
appBar: AppBar(title:Text('列表页面')),
body: ListView.builder(
itemCount:products.length,
itemBuilder: (context,index){
return ListTile(
title:Text(products[index].title),
onTap:(){
Navigator.push(
context,
MaterialPageRoute(builder:(context) => new ProductDetail(product: products[index])));
}
);
},
) ); }
} class ProductDetail extends StatelessWidget{
final Product product;
ProductDetail({Key key,@required this.product}):super(key:key); @override
Widget build(BuildContext context){
return new Scaffold(
appBar: AppBar(
title:Text('${product.title}'),
),
body:Center(child: Text('${product.description}'),)
);
}
}
2、页面跳转并返回数据
当我们返回页面时返回结果到上一个页面(也就是父页面)。这样的场景经常用于,我们去子页面选择了一项选项,然后把选择的结果返回给父级页面。
异步请求和等待
Dart中的异步请求和等待和ES6中的方法很像,直接使用async...await就可以实现。比如下面作了一个找商品的方法,然后进行跳转,注意这时候是异步的。等待结果回来之后,我们再显示出来内容。具体代码如下:
_navigateToXiaoJieJie(BuildContext context) async{ //async是启用异步方法
final result = await Navigator.push( //等待
context,
MaterialPageRoute(builder: (context)=>ItemDetail())
);
//SnackBar是用户操作后,显示提示信息的一个控件,类似Tost,会自动隐藏。SnackBar是以Scaffold的showSnackBar方法来进行显示的
Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result'))); setState(() {
showText= '$result';
}); }
SnackBar的使用
SnackBar
是用户操作后,显示提示信息的一个控件,类似Tost
,会自动隐藏。SnackBar
是以Scaffold
的showSnackBar
方法来进行显示的。
Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
返回数据的方式
返回数据其实是特别容易的,只要在返回时带第二个参数就可以了。
Navigator.pop(context,'xxxx'); //xxx就是返回的参数
我还加了一个showText,方便更好的看清楚效果。代码如下:
import 'package:flutter/material.dart'; class ItemPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('要编号'),),
body: Center(
child: RouteButton(),
),
);
}
} class RouteButton extends StatefulWidget {
_RouteButtonState createState() => _RouteButtonState();
} class _RouteButtonState extends State<RouteButton> {
String showText = ''; @override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: (){
_navigateToXiaoJieJie(context);
},
child: Text('要编号'),
),
Text(showText),
],
),
);
} _navigateToXiaoJieJie(BuildContext context) async{ //async是启用异步方法
final result = await Navigator.push( //等待
context,
MaterialPageRoute(builder: (context)=>ItemDeetail())
);
//SnackBar是用户操作后,显示提示信息的一个控件,类似Tost,会自动隐藏。SnackBar是以Scaffold的showSnackBar方法来进行显示的
Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result'))); setState(() {
showText= '$result';
}); } } class ItemDeetail extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('商品编号')),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
child: Text('1号商品'),
onPressed: (){
Navigator.pop(context,'1号编号:123'); //第2个参数是返回的参数
},
),
RaisedButton(
child: Text('2号商品'),
onPressed: (){
Navigator.pop(context,'2号编号:456'); //返回的参数
},
),
],
),
),
);
}
}
Flutter参数的传递和接收的更多相关文章
- 前端与后端之间参数的传递与接收和@RequestBody,@Requestparam,@Param三个注解的使用
参数在前台通过对象的形式传递到后台,在后台,可以用@RequestBody注解通过Map或JSONObject接收(太麻烦,既要从Map中取值,取完值后又要封装到Map),也可以用@RequestPa ...
- JavaWeb_(Struts2框架)参数传递之接收参数与传递参数
此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...
- Springmvc中 同步/异步请求参数的传递以及数据的返回
转载:http://blog.csdn.net/qh_java/article/details/44802287 注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方 ...
- 你好,C++(26)如何与函数内部进行数据交换?5.1.3 函数参数的传递
5.1.3 函数参数的传递 我们知道,函数是用来完成某个功能的相对独立的一段代码.函数在完成这个功能的时候,往往需要外部数据的支持,这时就需要在调用这个函数时向它传递所需要的数据它才能完成这个功能获 ...
- (转)Java程序利用main函数中args参数实现参数的传递
Java程序利用main函数中args参数实现参数的传递 1.运行Java程序的同时,可以通过输入参数给main函数中的接收参数数组args[],供程序内部使用!即当你在Java命令行后面带上参数,J ...
- flask不定参数的传递。多参数,多次传递
有的时候有一个分类查询,再来一个排序,这就有两个参数要传递多次. 还是不定长度,不定内容的传递. 这个是用request.args来实现: def home(): requests=request.a ...
- django额外参数的传递和url命名
django额外参数的传递 path方法:path(route, view, kwargs=None, name=None) path方法可以传递入一个额外参数的字典参数(kwarg),字典里的值就会 ...
- SpringMVC入门(二)—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器
一.参数的传递 1.简单的参数传递 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ * value:传入的参数名,required:是否必填,defaultValue:默认 ...
- springmvc中同步/异步请求参数的传递以及数据的返回
注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方式,以及将处理后的model 传向前台***** 1.前台传递数据的接受:传的属性名和javabean的属性相同 ...
随机推荐
- Robot Framework--修改log和报告的生成目录
1.修改log和报告的生成目录:-l F:\testreport\log -r F:\testreport\report -o F:\testreport\output -l:log -r:repor ...
- python+requests----登录接口reponse中token传递给其他接口使用的一个简单小示例介绍
#!/usr/bin/env python # coding=UTF-8 import requests def login(): url = "https://xxxx.xxx.xxx/v ...
- ansible模块补充
1.fetch模块, 将远程机器上的文件拉取到本地,以ip或者主机名生成目录,并保留原来的目录结构,与copy模块的功能相反. 主要参数 : dest -- 目标地址 src -- 源地址 例子 ...
- 利用tycho插件自动生成pom文件
mvn org.eclipse.tycho:tycho-pomgenerator-plugin:generate-poms -DgroupId=com.vogella.tychoexample com ...
- GitHub 基础搜索技巧
一.GitHub基本信息栏 1.项目名称 2.项目简介 3.项目的README.md文档 项目的详细介绍 4.项目的最后更新时间 是否还有人维护等等... 二.搜索方式列举 1. 在name\ ...
- HR# 5题解
T1 我傻了 前20个数暴力开桶记录,后面的每次暴力统计. #include<bits/stdc++.h> #define R register int using namespace s ...
- tinymce实现ctrl+v粘贴word图片并上传
tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...
- luogu 2272
Tarjan 缩点 拓扑排序 套路题
- Spring Cloud Eureka(六):Eureka Client 如何注册到Eureka Server
1.本节概要 根据前文我们对Eureka Server 有了一定的了解,本节我们主要学习Eureka Client 与 Eureka Server 如何通讯的及相关通信机制是什么,本文会弄清楚一下几个 ...
- flex的圣杯布局记录 (flex : 0 0 80px)