美文网首页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) 商品详情

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

  • 商品详情页基础架构

    商品详情页基础架构

  • 20180619工作日志

    20180618工作总结 1.设置京东店铺券 2.优化京东商品详情图片 3.更改微商城蛋糕商品属性 4.熟悉京东商...

  • Android GooglePay集成

    流程1.跟你们的后台拿到商品ID2.连接到GooglePay服务3.查询这个商品ID得到商品详情4.根据商品详情打...

  • 【产品常识】商品详情页面结构

    商品详情页面结构: 1、商品宣传图 2、商品名 3、原价现价 4、类别规格选项 5、购买按钮 6、长篇幅的图片详情...

  • Flutter 商品详情页布局

    题记: ​ 自律的最高境界是孤独, 孤独的最高境界是自由​ --每天学一点, 知识不断积累. 先看...

  • Flutter 与 iOS 功能比较

    此文档是学习过程中的总结,文章详情:https://flutterchina.club/flutter-for-i...

  • 商品详情

    4个链接 1. 公司介绍:让阳光照亮您的黑夜(亚马逊是否可以展示?) :研发部门、生产车间、品质监管部、销售部等各...

  • 商品详情

    1、加载本地H5 2、自适应宽高 代码 // 详情 { //创建网页配置对象 WKWebV...

  • 商品详情

    商品详情页面 主要结构,商品图片的轮播图,商品购买区域,商品参数区域 使用mui-card样式构建商品详情界面的三...

网友评论

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

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