Flutter基础学习 17-19 导航参数的传递和接收（2）

前边已经有了商品列表，下面要做的就是把商品数据传递过去，然后显示商品详情页面。

知识点：

一、导航参数的传递

我们还是使用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: ProducList(
       //用List.generate生成商品数据
       products:List.generate(20, (i)=>Product('商品:$i','这是一个商品描述，编号是$i'))
     ),
  ));
}
class ProducList extends StatelessWidget {
  final List<Product> products;
  //接收主方法传递过来的参数(构造方法)
  ProducList({Key key,@required this.products}):super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('商品列表'),),
      //用ListView.builder方法，作了一个根据传递参数数据形成的动态列表
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context,index){//构建item
          return ListTile(
            title: Text(products[index].title),
            onTap: (){
              Navigator.push(context, MaterialPageRoute(//跳转界面并传递product数据参数
                builder: (context)=>new ProductDetail(product:products[index])
              ));
            },//item的点击事件
          );
        },
      ),
    );
  }
}
class ProductDetail extends StatelessWidget {
  final Product product;
  //接收传递过来product数据参数
  ProductDetail({Key key,@required this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('${product.title}'),
      ),
      body: Center(
        child: Text('${product.description}'),//显示商品描述
      ),
    );
  }
}

四、运行效果如下