P18. Flutter 导航参数的传递和接收
本文主要学习导航页面跳转的时候参数的传递和接受。
Awesome Flutter snippets 组件的使用
在实际开发中我们的代码会很多,这时候我们要加快敲代码的速度,推荐大家可以使用 VSCode 中的Awesome Flutter snippets
插件。它可以帮忙我们快速生成常用的 Flutter 代码片段。
比如输入stlss
就会给我们生成如下代码:
class extends StatelessWidget { @override Widget build(BuildContext context) { return Container( ); } }
安装完成后,我们可以看这个插件的说明,可以快速生成很多代码片段,我就不一个个给大家试了,小伙伴们可以自己测试。熟练掌握后,能大大加快我们的代码编写速度。
声明数据结构类
Dart 中可以使用类来抽象一个数据,比如我们模仿一个商品信息,有商品标题和商品描述。我们定义了一个 Product 类,里边有两个字符型变量,title
和description
。
title
:是商品标题。description
: 商品详情描述
代码如下:
class Product{ final String title; //商品标题 final String description; //商品描述 Product(this.title,this.description); }
构建一个商品列表
作一个商品的列表,这里我们采用动态的构造方法,在主方法里传递一个商品列表(List)到自定义的 Widget 中。
先来看看主方法的编写代码:
void main(){ runApp(MaterialApp( title:'数据传递案例', home:ProductList( products:List.generate( 20, (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]) ) );
这段代码要写在onTap
相应事件当中。这时候ProductDetail
会报错,因为我们还没有声明这个组件或者说是类。
子页面接受参数并显示
现在需要声明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}'),) ); } }
先接受了参数,并把数据显示在了页面中。
Demo 全部代码如下
为了更好的帮助大家学习,我把所有的传递参数和接受参数的代码附在了下面。
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}'),) ); } }
效果如下:
码云笔记 » P18. Flutter 导航参数的传递和接收