flutter ListView列表和导航传值

main.dart

import 'package:flutter/material.dart';

void main(){
  return runApp(MyApp());
}

class ProductInfo{
  final String title;
  final String description;
  ProductInfo(this.title,this.description);
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '导航栏传值',
      home: Scaffold(
        appBar: AppBar(title: Text('导航栏传值'),),
        body: ProductList(
          products: List.generate(20, (i)=>ProductInfo("title$i", "description")),
        ),
      ),
    );
  }
}

class ProductList extends StatelessWidget{
  final List<ProductInfo> products;
  ProductList({Key key, @required this.products}):super(key:key);
  @override
  Widget build(BuildContext context) {
    
    return ListView.builder(
      itemCount: products.length,
      itemBuilder: (context,index){
        return ListTile(
          title: Text(products[index].title),
          //列表被点击
          onTap: (){
            print(products[index].title);
            Navigator.push(
              context, 
              MaterialPageRoute(
                builder:(context) => ProductDetail(product: products[index])
              ));
          },
        );
      },
    );
  }
}

class  ProductDetail extends StatelessWidget {
  final ProductInfo 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: RaisedButton(
          child: Text("点击返回"),
          onPressed: (){
            Navigator.pop(context);
          },
        ),
      )
    );
  }
}

重点
1.快速创建模型对象

List.generate(20, (i)=>ProductInfo("title$i", "description"))

2.快速创建ListView列表

ListView.builder(
      itemCount: products.length,
      itemBuilder: (context,index){
        return ListTile(
          title: Text(products[index].title),
          //列表被点击
          onTap: (){
            print(products[index].title);
            Navigator.push(
              context, 
              MaterialPageRoute(
                builder:(context) => ProductDetail(product: products[index])
              ));
          },

        );
      },
    );

3.导航Navigator push

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

4.导航pop

    Navigator.pop(context);