flutter

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

2020-03-13  本文已影响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

上一篇 下一篇

猜你喜欢

热点阅读