Flutter学习之导航与数据的传输

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title: "导航的数据传输",
    home: ProductList(
      products: List.generate(100, (i)=>Product("ayang的商品 $i","商品详情页面，编号 $i"))
    )
));
}

class  Product {
  final String title;
  final String description;
  Product(this.title,this.description); //使用Product("xx","xx")就会为实例化的对象中的title 和description属性赋值
}

//stlss

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("商品列表"),
        backgroundColor: Colors.pinkAccent,
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context,index){
          return ListTile(
            title: Text(products[index].title),
            onTap: (){
              Navigator.push(context, MaterialPageRoute(builder: (context)=>ProductDetail(product:products[index])));
            },
          );
        }
      ),
    );
  }
}

//stlss
class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({Key key, this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("${product.title}"), backgroundColor: Colors.pinkAccent),
      body: Center(
        child: Text("${product.description}"),
      ),
    );
  }
}

没理解dart语法的类的构造与参数传递的时候理解这个还是有点复杂的，接下来一点一点解析，

void main(){
  runApp(MaterialApp(
    title: "导航的数据传输",
    home: ProductList(
      products: List.generate(100, (i)=>Product("ayang的商品 $i","商品详情页面，编号 $i"))
    )
));
}

这里是一个主函数，他返回了一个MaterialApp，并在home中使用了接下来自己定义的ProductList组件，并且向ProductList的product参数传入了一个通过迭代函数产生的100项的数组，数组的每一项都是个一个创建的Product类(组件)，

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("商品列表"),
        backgroundColor: Colors.pinkAccent,
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context,index){
          return ListTile(
            title: Text(products[index].title),
            onTap: (){
              Navigator.push(context, MaterialPageRoute(builder: (context)=>ProductDetail(product:products[index])));
            },
          );
        }
      ),
    );
  }
}

这段代码是继承得到的一个ProductList类，首先定义接收参数的入口

  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);

定义了一个名为products的数组，数组里的的内容必须为Product组件，然后接收参数。

 body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context,index){
          return ListTile(
            title: Text(products[index].title),
            onTap: (){
              Navigator.push(context, MaterialPageRoute(builder: (context)=>ProductDetail(product:products[index])));
            },
          );
        }
      ),

然后使用ListView.build这个创建动态列表的方法，使用itemCount确定列表长度，
itemBuilder: (context,index){return ListTile()}返回列表的项，
使用onTap(){}方法处理点击事件——使用Navigator导航组件

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

跳转到ProductDetail组件创建的页面。