Flutter for OpenHarmony 校园闲置跳蚤市场APP 实战DAY3：商品卡片封装+模拟假数据+分类联动筛选
Flutter for OpenHarmony 校园闲置跳蚤市场APP 实战DAY3：商品卡片封装+模拟假数据+分类联动筛选
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
哈喽大家好，咱们校园闲置跳蚤市场连载来到DAY3！
回顾前两天进度：
DAY1 新建项目、规范目录、配依赖、搭底部导航全局骨架；
DAY2 写完商品实体类、全局分类常量、首页顶部横向分类标签栏，还实现了标签点击选中切换。
今天DAY3咱们继续往下落地，全程还是老风格：大段口语化文字讲解、逻辑一步不跳、每处关键功能附5–6行精简代码、不堆长代码、新手照抄就能跑，整篇直接可以发CSDN连载。
🚀 DAY3 本期开发目标
- 全局封装闲置商品卡片自定义组件，独立抽离成公用Widget，全页面可复用
- 构造贴合校园真实场景的模拟假数据，方便先把列表跑通
- 首页搭建商品瀑布流列表布局，配合懒加载，滑动不卡顿
- 完成分类标签和商品列表联动筛选，点什么分类就只展示对应商品
- 优化UI间距、圆角、阴影，适配鸿蒙简约清新风格
- 提前处理空数据逻辑，为后期真实发布闲置做铺垫
一、封装全局复用商品卡片组件
做项目一定要学会抽离公用组件，不能每个页面都重复写布局代码。
咱们所有闲置商品，展示样式都是统一的：商品图、标题、价格、分类、成色、发布时间。
所以直接在widget文件夹新建goods_card.dart，做成全局通用卡片，首页、我的发布、收藏页全都能复用。
卡片整体思路：
外层圆角白色卡片、带轻微阴影；
上面占位图区域，下面文字信息区；
价格用醒目主色，其他文字灰色弱化，层次分明。
核心精简代码
Container(decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(12),boxShadow:[BoxShadow(color:Colors.black12,blurRadius:3)],),padding:EdgeInsets.all(10),child:Column(我只放关键布局结构，不堆长代码，剩下内部文字、图片布局顺着嵌套往下写就行，新手完全看得懂。
为什么要单独封装卡片？
- 后期UI要改样式，只改这一个文件，全APP自动同步更新；
- 减少重复代码，项目结构干净，毕设看架构非常加分；
- 首页、收藏、我的发布共用一套UI，风格统一不杂乱。
卡片内部布局逻辑简单说下
- 上半部分：用Container做灰色占位图，后期替换成真实上传图片
- 中间：商品标题，限制一行溢出省略
- 下方左边：价格高亮显示
- 下方右边：分类 + 成色小字灰色
- 最底部：发布时间浅灰色小字
完全对标市面上二手APP样式，简约耐看，还适配鸿蒙视觉风格。
二、构造校园闲置模拟假数据
现在还没做发布功能，我们先用本地模拟假数据把列表先渲染出来，效果先跑通，后面对接真实发布数据完全不用改布局。
假数据完全贴合校园真实场景：二手教材、耳机、宿舍水壶、篮球、平板、护肤品这些，非常接地气。
我们在首页页面内部定义一个模拟数据列表，批量生成多条GoodsModel对象。
模拟数据核心代码
List<GoodsModel>mockGoodsList=[GoodsModel(id:"1",title:"大一高数教材九成新",price:15.0,category:"校园书籍",condition:"九成新",desc:"无笔记，干净整洁",time:"2026-05-06",),多复制几条，改改标题、分类、价格就行，快速造出一整页列表数据。
新手容易犯的错
很多同学喜欢直接用List
三、首页搭建商品列表布局
首页结构现在很清晰：
顶部 = 横向分类标签栏
下面 = 商品网格列表
我们用GridView做两列网格布局，校园闲置APP最常用的排版，整齐好看。
网格列表核心代码
GridView.count(crossAxisCount:2,crossAxisSpacing:10,mainAxisSpacing:10,padding:EdgeInsets.all(12),physics:BouncingScrollPhysics(),两列排布、设置行列间距、加弹性滚动效果，适配鸿蒙手机滑动手感。
把筛选后的商品列表遍历，每一项传入我们刚才封装的GoodsCard组件，直接渲染界面。
四、实现分类标签与列表联动筛选（本期重点）
这是DAY3最核心的逻辑：
顶部点「数码产品」，列表只显示数码；
点「校园书籍」，只显示书籍；
点「全部」，展示所有商品。
逻辑思路非常简单，我用大白话讲清楚：
- 保留一份原始全部模拟数据不动
- 根据当前选中的分类，过滤生成一份临时展示列表
- 标签点击时，更新选中分类，重新过滤一次数据，刷新UI
筛选核心过滤代码
List<GoodsModel>getFilterList(){if(_currentCategory=="全部"){returnmockGoodsList;}returnmockGoodsList.where((item)=>item.category==_currentCategory).toList();}就这几行，逻辑一目了然：
选中全部 → 返回完整列表；
否则 → 只返回分类匹配的商品。
联动流程拆解（新手必懂）
- 点击顶部分类标签
- setState更新
_currentCategory - 自动调用筛选方法，得到过滤后的新列表
- GridView绑定新列表，自动刷新界面
全程解耦，后期加新分类、加新商品，逻辑完全不用改动，扩展性极强。
五、UI细节优化与鸿蒙适配
为了让项目看起来更专业、像正经上架APP，我们做几处小优化：
全局统一间距
所有卡片、列表边距统一固定数值，不要大小乱设，视觉更整齐。文字层级区分
价格用主题主色加粗；
标题黑色正常字号；
分类、时间用浅灰色小字，主次分明。列表弹性回弹
给GridView加上BouncingScrollPhysics()，鸿蒙手机滑动更顺滑，符合系统原生交互习惯。预防文字溢出
所有标题固定最大行数，溢出自动省略，避免小屏机型布局撑破。
Text(title,maxLines:1,overflow:TextOverflow.ellipsis)六、新手常见问题答疑
问题1：列表渲染不出来，空白一片？
大概率三种原因：
- 模拟数据没正确创建GoodsModel对象
- GridView没绑定过滤后的列表
- 忘记在标签点击里调用setState刷新界面
问题2：分类筛选没反应，切换标签列表不变？
检查筛选条件是否和分类文字完全一模一样，多一个空格、少一个字都匹配不到。
问题3：卡片挤在一起、间距很乱？
在GridView里设置好crossAxisSpacing和mainAxisSpacing，同时给卡片内部设置padding，内外边距配合就整齐了。
✅ DAY3 小结
今天实实在在完成三件大事：
- 抽离封装了可全局复用的商品卡片组件
- 构造校园真实场景模拟数据，用实体类规范装载
- 完成顶部分类标签 + 下方商品列表联动筛选，核心业务逻辑跑通
现在首页已经完全成型：有分类栏、有两列商品网格、点分类自动筛选，看起来已经是一个正经二手APP的样子了。
📅 DAY4 预告
DAY4我们开发发布闲置页面：
- 多图选择上传布局
- 标题、价格、分类、成色、描述输入表单
- 提交按钮校验、空输入判断
- 发布后把商品存入本地缓存，自动刷新首页列表