Flutter参数的传递和接收

上次只写了方法和参数，此次写了完整的示例，页面间参数的传递和接收的示例。数据结构

一、参数传递

用在程序上解释就是好比你进入一个商品选择列表，当你想选择一个商品的具体信息的时候，你就要传递商品编号，详细页面接受到编号后，显示出不一样的内容。app

声明数据结构类

Dart中可使用类来抽象一个数据，好比咱们模仿一个商品信息，有商品标题和商品描述。咱们定义了一个Product类，里边有两个字符型变量，title和description。less

title:是商品标题。
description: 商品详情描述

class Product{ final String title; //商品标题
  final String description;  //商品描述
  Product(this.title,this.description); }

构建一个商品列表

做一个商品的列表，这里咱们采用动态的构造方法，在主方法里传递一个商品列表（List）到自定义的Widget中。异步

先来看看主方法的编写代码:async

import 'package:flutter/material.dart'; void main(){ runApp(MaterialApp( title:'数据传递案例', home:ProductList( products:List.generate( 20, (i)=>Product('商品 $i','这是一个商品详情，编号为:$i') ), ) )); }

上面的代码是主路口文件，主要是在home属性中，咱们使用了ProductList，这个自定义组件，并且时候会报错，由于咱们缺乏这个组件。这个组件咱们传递了一个products参数，也就是商品的列表数据，这个数据是咱们用List.generate生成的。而且这个生成的List原型就是咱们刚开始定义的Product这个类（抽象数据）。ide

ProductList自定义组件的代码：ui

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方法，做了一个根据传递参数数据造成的动态列表。this

参数的传递

仍是使用Navigator组件，而后使用路由MaterialPageRoute传递参数，具体代码以下。spa

Navigator.push( context, MaterialPageRoute( builder:(context)=>new ProductDetail(product:products[index]) ) );

子页面接受参数并显示

如今须要声明ProductDetail这个类（组件），先要做的就是接受参数，具体代码以下。code

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( 20, (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( 20, (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}'),) ); } }

二、页面跳转并返回数据

当咱们返回页面时返回结果到上一个页面（也就是父页面）。这样的场景常常用于，咱们去子页面选择了一项选项，而后把选择的结果返回给父级页面。

异步请求和等待

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'); //返回的参数
 }, ), ], ), ), ); } }