微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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);

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐