Flutter 传递动态数据,并跳转

效果图

import 'package:flutter/material.dart';

class Product{
  final String title;
  final String description;
  Product(this.title,this.description);
}
main(){
  runApp(MaterialApp(
    title: '导航的数据传递和接收',
    home: ProductList(
      // 循环20次
      prodcuts:List.generate(20, (i)=> Product('商品 $i', '这是一个商品详情,编号为：$i'))
    ),
  ));
}
class ProductList extends StatelessWidget {
  // 接受传来的数据
  final List<Product> prodcuts;
  ProductList({Key key, @required this.prodcuts}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('商品的列表'),),
      body: ListView.builder(
        // 获取长度
        itemCount: prodcuts.length,
        itemBuilder: (context,index){
          return ListTile(
            title: Text(prodcuts[index].title),
            // 点击跳转新的页面
            onTap: (){
              Navigator.push(context, MaterialPageRoute(
          // 创建一个要跳转的类，并把参数传递过去
                builder: (context)=> ProductDetail(product:prodcuts[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}'),
      ),
    );
  }
}