10. 页面的跳转传参

1. 页面的跳转与传值

这里我们举个例子，首页是一个商品的列表，当点击列表的某一项的时候，跳转到商品详情页

2. 商品实体类

/// 商品的描述类
class Product {

  final String title;
  final String desc;

  Product(this.title,this.desc);

}

3. 商品列表界面

/// 商品列表界面
class ProductList extends StatelessWidget {

  final List<Product> products;

  const ProductList({Key? key, required this.products}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("商品列表"),
      ),
      body: ListView.builder(
        itemCount: products.length,
          itemBuilder: (context,index) {
            return ListTile(
              title: Text(
                  products[index].title,
                  style: const TextStyle(
                    color: Colors.green,
                    fontSize: 20.0
                  ),
              ),
              onTap: (){
                Navigator.push(context, MaterialPageRoute(builder: (context) => ProductDetail(product: products[index])));
              },
            );
          }
      ),
    );
  }

}

4. 商品详情界面

/// 商品的详情页面
class ProductDetail extends StatelessWidget {

  final Product product;

  const ProductDetail({Key? key,required this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("商品详情页"),
      ),
      body: Center(
        child: Text(product.desc)
      ),
    );
  }

}