导航参数的传递与接收

831078bee4470306319605fd651683b.png b05993901995aef2b6e8349a8d05eba.png

Awesome Flutter snippets组件的使用

我们要加快敲代码的速度，可以使用VSCode 中的Awesome Flutter snippets插件。它可以帮忙我们快速生成常用的Flutter代码片段。
比如输入stlss就会给我们生成如下代码：

class name extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
    );
  }
}

声明数据结构类

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

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

代码如下:

//传递的数据结构,也可以理解为对商品数据的抽象
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')
      ),
    )
  ));
}

上面的代码是主路口文件，主要是在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])
  )
);

子页面接收参数并展示，代码如下

class ProductDetail extends StatelessWidget{

  final 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}'),
      ),

    );
  }
}

全部代码

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 Scaffold(
      appBar: AppBar(
        title: Text('${product.title}'),
      ),
      body: Center(
        child: Text('${product.description}'),
      ),

    );
  }
}