购物商品列表的实现
购物商品列表的实现
class ProductListPage extends StatefulWidget {
late Map _arguments;
ProductListPage({
Key? key, arguments}) : super(key: key) {
_arguments = arguments;
}
@override
State<ProductListPage> createState() => _ProductListPageState();
}
class _ProductListPageState extends State<ProductListPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('商品列表'),
),
//最外部套一个Padding保证整个列表与屏幕边有一定距离
body: Padding(
padding: EdgeInsets.all(10),
//显示列表
child: ListView.builder(
itemBuilder: (context, index) {
//用一个竖直展示的组件,上面是一个Row用于展示内容,下部为一个Divider用来充当分割,与下面一个条目保持一定距离
return Column(
children: [
//竖直组件,左边显示图片,右边显示内容
Row(
children: [
//图片用一个SizeBox包裹来控制大小
SizedBox(
width: ScreenAdapter.width(180),
height: ScreenAdapter.width(180),
child: Image.network(
"https://www.itying.com/images/flutter/list2.jpg",
fit: BoxFit.cover,
),
),
//右边Expanded占屏幕剩下所有宽度
Expanded(
flex: 1,
//Container包裹右边所有文字部分,还可以设置高度
child: Container(
height: ScreenAdapter.higth(180),
padding: EdgeInsets.all(10),
//右边再用一个垂直组件,内部包含三个小组件
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"戴尔(DELL)灵越3670 英特尔酷睿i5 高性能 台式电脑整机(九代)",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
Row(
children: [
//方便给文字设置边框和背景颜色
Container(
height: ScreenAdapter.higth(36),
margin: EdgeInsets.only(right: 10),
alignment: Alignment(0, 0),
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(230, 230, 230, 0.9),
),
child: Text('4G'),
),
Container(
height: ScreenAdapter.higth(36),
alignment: Alignment(0, 0),
margin: EdgeInsets.only(right: 10),
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(230, 230, 230, 0.9),
),
child: Text('4G'),
),
],
),
Text(
"¥990",
style: TextStyle(color: Colors.red, fontSize: 16),
)
],
),
),
)
],
),
Divider(
height: 20,
)
],
);
},
itemCount: 10,
),
),
);
}
}