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

js 复制代码
// 爆款商品
Widget _buildFlashSell() {
  return <Widget>[
    SizedBox(height: 25.w,),
    // 标题
    <Widget>[
      TDImage(assetUrl: "assets/myimage/nav-11.png",width: 36.w,height: 36.w,),
      SizedBox(width: 7.w,),
      TextWidget.body('爆款商品',size: 28.sp,color: const Color(0xff181818),),
      SizedBox(width: 20.w,),
      TextWidget.body('品质卓越,超值享受,一切尽在我们的爆款产品! ',size: 20.sp,color: const Color(0xff999999),),
    ].toRow(
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
    ).paddingHorizontal(30.w),
    SizedBox(height: 30.w,),

    // 爆款商品可左右滑动查看
    <Widget>[
      SizedBox(width: 30.w,),
      for (var i = 0; i < 5; i++)
      <Widget>[
        TDImage(assetUrl: "assets/myimage/goods.png",width: 200.w,height: 160.w,),
        SizedBox(height: 5.w,),
        TextWidget.body(
          '爆款商品爆款商品爆款商品',
          size: 28.sp,
          color: const Color(0xff181818),
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
        ),
        SizedBox(height: 5.w,),
        <Widget>[
          TextWidget.body('¥',size: 24.sp,color: const Color(0xffFF6E00),),
          TextWidget.body('599.00',size: 28.sp,color: const Color(0xffFF6E00),),
        ].toRow(),
        Text('原价¥599.00',
          style: TextStyle(
            fontSize: 24.sp,
            color: const Color(0xff999999),
            decoration: TextDecoration.lineThrough,
            decorationColor: const Color(0xff999999)
          ),
        ),
      ].toColumn(crossAxisAlignment: CrossAxisAlignment.start).width(200.w).marginOnly(right: 15.w),
      SizedBox(width: 15.w,),
    ].toListView(scrollDirection: Axis.horizontal,).expanded(),

  ].toColumn()
  .decorated(border: Border.all(width: 1, color: const Color(0xffEDF1F2)),borderRadius: BorderRadius.circular(20.w))
  .tight(height: 390.w);
}
相关推荐
花卷HJ22 分钟前
Android 沉浸式全屏实践:主题 + 状态栏文字颜色完整方案
android
摘星编程26 分钟前
React Native for OpenHarmony 实战:Alert 警告提示详解
javascript·react native·react.js
Joe55629 分钟前
vue2 + antDesign 下拉框限制只能选择2个
服务器·前端·javascript
WHS-_-202242 分钟前
Tx and Rx IQ Imbalance Compensation for JCAS in 5G NR
javascript·算法·5g
摘星编程42 分钟前
React Native for OpenHarmony 实战:GestureResponderSystem 手势系统详解
javascript·react native·react.js
lili-felicity1 小时前
React Native for OpenHarmony 实战:加载效果的实现详解
javascript·react native·react.js·harmonyos
奋斗的小青年!!1 小时前
Flutter跨平台开发:笔记分享功能适配OpenHarmony
flutter·harmonyos·鸿蒙
济6171 小时前
linux 系统移植(第六期)--Uboot移植(5)--bootcmd 和 bootargs 环境变量-- Ubuntu20.04
java·前端·javascript
花卷HJ2 小时前
Android 项目中 BaseActivity 封装实践(支持 ViewBinding、PermissionUtils动态权限、加载弹窗和跳转动画)
android
lili-felicity2 小时前
React Native for OpenHarmony 实战:Easing 动画完全指南
javascript·react native·react.js