美文网首页
我的第一个flutter项目

我的第一个flutter项目

作者: 骑着雅迪小毛驴上班的老瞿 | 来源:发表于2018-12-17 18:02 被阅读0次

直接上代码

import 'package:flutter/material.dart';

class Product{
  final String title;// 商品标题
  final String description; // 商品描述
  Product(this.title,this.description);
}

void main(){
  runApp(MaterialApp(
    title: '导航的数据传递和接受',
    home: ProductList(
      products:List.generate(
        20,
        (i)=>Product('商品 $i', '这是一个商品详情,编号为$i')
        )
    ),
  ));
}
class ProductList extends StatelessWidget {

  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);

  @override
  Widget build(BuildContext context) {
    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)=>ProductDetail(product:products[index])
                )
              );
            },
          );
        },
      ),
    );
  }
}

class ProductDetail extends StatelessWidget {

  final Product 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: Text('${product.description}'),),
    );
  }
}

效果图

image.png

相关文章

网友评论

      本文标题:我的第一个flutter项目

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