2.Flutter部件Listview的简单使用
import 'package:flutter/material.dart';
main() {
runApp(KSJApp());
}
class KSJAppextends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner:false,
home:KSJHomePage(),
);
}
}
class KSJHomePageextends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text('商品列表')
),
body:KSJHomePageBody(),
);
}
}
class KSJHomePageBodyextends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
// listView是可以滚动的
return ListView(
padding:EdgeInsets.only(top:8),
children: [
KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),
KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),
KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),
KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),
KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),
],
);
}
}
class KSJHomePageBodyItemWidgetextends StatelessWidget {
final Stringtitle;
final Stringdesc;
final StringimageURL;
final style1 =TextStyle(fontSize:25, color: Colors.orange);
final style2 =TextStyle(fontSize:15, color: Colors.green);
KSJHomePageBodyItemWidget(this.title, this.desc, this.imageURL);
@override
Widgetbuild(BuildContext context) {
return Container(
decoration:BoxDecoration(
border:Border.all(width:8,color: Colors.black12)
),
child:Column(
// 主轴的简单使用
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height:8),
Text(this.title, style:style1),
SizedBox(height:8),
Text(this.desc, style:style2),
// 图片具有IO操作来处理耗时操作
// 注意图形警告
Container(
padding:EdgeInsets.all(8),
child:Image.network(this.imageURL,fit: BoxFit.cover))
],
),
);
}
}
