Flutter：ListView实现一个可左右滑动的商品列表

1. // 爆款商品
2. Widget _buildFlashSell() {
3.   return <Widget>[
4.     SizedBox(height: 25.w,),
5.     // 标题
6.     <Widget>[
7.       TDImage(assetUrl: "assets/myimage/nav-11.png",width: 36.w,height: 36.w,),
8.       SizedBox(width: 7.w,),
9.       TextWidget.body('爆款商品',size: 28.sp,color: const Color(0xff181818),),
10.       SizedBox(width: 20.w,),
11.       TextWidget.body('品质卓越，超值享受，一切尽在我们的爆款产品！ ',size: 20.sp,color: const Color(0xff999999),),
12.     ].toRow(
13.       crossAxisAlignment: CrossAxisAlignment.baseline,
14.       textBaseline: TextBaseline.alphabetic,
15.     ).paddingHorizontal(30.w),
16.     SizedBox(height: 30.w,),
18.     // 爆款商品可左右滑动查看
19.     <Widget>[
20.       SizedBox(width: 30.w,),
21.       for (var i = 0; i < 5; i++)
22.       <Widget>[
23.         TDImage(assetUrl: "assets/myimage/goods.png",width: 200.w,height: 160.w,),
24.         SizedBox(height: 5.w,),
25.         TextWidget.body(
26.           '爆款商品爆款商品爆款商品',
27.           size: 28.sp,
28.           color: const Color(0xff181818),
29.           overflow: TextOverflow.ellipsis,
30.           maxLines: 1,
31.         ),
32.         SizedBox(height: 5.w,),
33.         <Widget>[
34.           TextWidget.body('￥',size: 24.sp,color: const Color(0xffFF6E00),),
35.           TextWidget.body('599.00',size: 28.sp,color: const Color(0xffFF6E00),),
36.         ].toRow(),
37.         Text('原价￥599.00',
38.           style: TextStyle(
39.             fontSize: 24.sp,
40.             color: const Color(0xff999999),
41.             decoration: TextDecoration.lineThrough,
42.             decorationColor: const Color(0xff999999)
43.           ),
44.         ),
45.       ].toColumn(crossAxisAlignment: CrossAxisAlignment.start).width(200.w).marginOnly(right: 15.w),
46.       SizedBox(width: 15.w,),
47.     ].toListView(scrollDirection: Axis.horizontal,).expanded(),
49.   ].toColumn()
50.   .decorated(border: Border.all(width: 1, color: const Color(0xffEDF1F2)),borderRadius: BorderRadius.circular(20.w))
51.   .tight(height: 390.w);
52. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。