当前位置: 首页 > article >正文

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

在这里插入图片描述

// 爆款商品
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);
}

http://www.kler.cn/a/441229.html

相关文章:

  • 策略梯度 (Policy Gradient):直接优化策略的强化学习方法
  • Win11下帝国时代2无法启动解决方法
  • Golang笔记——常用库context和runtime
  • 数据结构与算法之栈: LeetCode 739. 每日温度 (Ts版)
  • 巴塞尔问题详解:计算所有正整数平方的倒数之和
  • 人工智能在计算机视觉中的应用与创新发展研究
  • 【Unity功能集】TextureShop纹理工坊(二)图层(上)
  • 单词谜(详解版)
  • python —— 常用命令行的命令
  • JS逆向--反调试(SoJson为例)
  • 从构想到实现:EasyOne 多模态 AI 产品开发历程
  • 集成自然语言理解服务,让应用 “听得懂人话”
  • 解决Linux 虚拟机网段与虚拟机配置网段不一致
  • IP6822为智能手机提供无线充电方案的无线充电发射微控制SOC芯片
  • Day25 C++ 文件和流
  • SLM510A系列——24V,15到150mA单通道可调电流线性恒流LED驱动芯片
  • 浅说单调队列
  • java中输入输出流
  • vue3 父组件调用子组件 el-drawer 抽屉
  • linux 串口调试工具minicom使用详解
  • CSS基础与应用详解
  • 王佩丰24节Excel学习笔记——第十五讲:条件格式与公式
  • 浅谈Java注解之CachePut
  • springboot城镇保障性住房管理系统(代码+数据库+LW)
  • go语言使用websocket发送一条消息A,持续接收返回的消息
  • 代码随想录day21 | leetcode 669.修剪二叉搜索树 108.将有序数组转换为二叉搜索树 538.把二叉搜索树转换为累加树 二叉树总结篇