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);
}
相关推荐
张元清3 分钟前
React useEventSource Hook:自带断线重连的 Server-Sent Events (2026)
javascript·react.js
铁皮饭盒30 分钟前
网页端, 6.5MB人脸识别模型, 谷歌框架, 又快又准
前端·javascript·后端
自进化Agent智能体1 小时前
Hermes 工具与工具集——Hermes 的内置能力
javascript
AlexMaybeBot1 小时前
躺在沙发上开发 Openclaw 的移动端APP
前端·flutter
你挚爱的强哥1 小时前
【exportExcel】单纯靠js不用任何其他第三方插件导出xls格式文件
开发语言·javascript·ecmascript
天空之城--2 小时前
Android Flutter行业动态与学习参考(2026年8月)
android·flutter
大家的林语冰2 小时前
👉 尤雨溪再次成立新公司,同时官宣 Pinia 4 正式发布!
前端·javascript·vue.js
用户938515635073 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战(二)
前端·javascript·typescript
FungLeo3 小时前
Flutter Web token 存储陷阱:crypto.subtle 在非安全上下文失效排查实录
前端·安全·flutter
quantdash_cc3 小时前
基于 QuantDash 5 分钟 K 线的网格交易策略参数网格搜索寻优实战
android·开发语言·pandas·量化·quantdash