美文网首页flutter
Flutter 基础总结(4) 商品详情

Flutter 基础总结(4) 商品详情

作者: 总会颠沛流离 | 来源:发表于2020-03-13 09:57 被阅读0次

    现代人的崩溃是一种默不作声的崩溃。不会摔门砸东西,不会流眼泪或歇斯底里。但可能某一秒突然就积累到极致了,也不说话,也不真的崩溃,也不太想活,也不敢去死。

    1:效果图

    image.png image.png

    2:代码

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    class Product {
    final String title;
    final String desc;
    
    Product(this.title, this.desc);
    }
    
    void main() {
      /*  runApp(MaterialApp(
    title: "带数据的导航",
    home: ProductList(products:  List.generate(20, (i){
     return  Product("商品 $i","这是一个商品详情 $i")
    
    }),),
    ));*/
    runApp(MaterialApp(
      title: "带数据导航",
      home: ProductList(
          products:List.generate(20, (i)=>Product('商品 $i','这个一个商品详情,编号为$i')))
    ),
    );
    }
    
    class ProductList extends StatelessWidget {
    final List<Product> products;
    
     ProductList({Key key, this.products}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("商品详情"),
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(products[index].title),
            onTap: () {
              Navigator.push(context, MaterialPageRoute(
                builder: (context) {
                  return ProductDetail(product: products[index]);
                },
              ));
            },
          );
        },
      ),
    );
    }
    }
    
    class ProductDetail extends StatelessWidget {
    final Product product;
    
    ProductDetail({Key key,  this.product}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("${product.title}"),
      ),
      body: Center(
        child: Text("${product.desc}"),
      ),
    );
    }
    }
    

    地址githup: https://github.com/xuezhihuixzh/Flutter_demo.git

    相关文章

      网友评论

        本文标题:Flutter 基础总结(4) 商品详情

        本文链接:https://www.haomeiwen.com/subject/ogmfshtx.html