Flutter for OpenHarmony 校园闲置跳蚤市场APP 实战DAY2：商品实体类+分类常量+首页分类标签栏
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
哈喽各位小伙伴！咱们校园闲置跳蚤市场APP实战DAY2来啦🎉 上一期DAY1我们已经把项目地基打牢了——新建项目、配置鸿蒙环境、规范目录、搭好底部Tab骨架、初始化存储工具，今天咱们就正式往里面填内容，难度循序渐进，完全不跳步，还是老规矩：口语化大段讲解+每小节5-6行精简核心代码，不堆冗余代码，新手跟着敲就能成，全程贴合校园场景，兼顾实用性和毕设规范，看完就能上手写代码！
🚀 DAY2 本期开发目标（详细版，新手必看）
- 编写核心「闲置商品实体类」（goods_model.dart），适配本地存储，后续发布、修改、展示闲置全靠它，附带JSON序列化代码，避免数据错乱
- 预置校园闲置全部分类常量，贴合学生需求（数码、书籍、生活用品等），统一管理，后续新增分类只需改一处
- 搭建首页顶部分类横向标签栏，支持左右滑动、选中高亮，适配鸿蒙简约UI风格
- 实现分类标签切换逻辑，点击不同分类，后续能筛选对应闲置商品，提前做好逻辑铺垫
- 测试实体类、分类常量、分类标签栏的兼容性，确保和DAY1搭建的框架无缝衔接，无报错
- 补充细节：分类标签样式优化、实体类注释补全，符合毕设代码规范，方便后续维护
一、核心：编写闲置商品实体类（goods_model.dart）
这一步是重中之重！所有和“闲置商品”相关的操作（发布、展示、收藏、修改），都要靠这个实体类来承载数据，简单说就是“给闲置商品定规矩”——规定一个闲置商品要有哪些信息（标题、价格、品类、成色等），新手一定要认真写，后续所有功能都依赖它。
先想清楚，学生发布闲置，需要填写哪些信息？结合校园场景，咱们定这7个核心字段，不多不少，刚好满足需求：
- id：商品唯一标识（避免重复，方便后续删除、修改）
- title：商品标题（比如“九成新iPhone13”）
- price：商品价格（学生交易，支持小数，比如“50.0元”）
- category：商品分类（比如“数码”“书籍”）
- condition：商品成色（比如“九成新”“全新未拆封”）
- desc：商品描述（简单介绍商品情况）
- time：发布时间（方便后续按时间排序）
核心代码（5-6行精简版，直接复制）
import'dart:convert';classGoodsModel{finalStringid;// 商品唯一IDfinalStringtitle;// 商品标题finaldouble price;// 商品价格finalStringcategory;// 商品分类finalStringcondition;// 商品成色finalStringdesc;// 商品描述finalStringtime;// 发布时间// 构造函数，初始化所有字段GoodsModel({requiredthis.id,requiredthis.title,requiredthis.price,requiredthis.category,requiredthis.condition,requiredthis.desc,requiredthis.time,});}补充：JSON序列化（必写，避免本地存储报错）
咱们要把商品数据存到本地，必须把实体类转成JSON字符串，再存进去；读取的时候，再把JSON转成实体类，这一步新手容易漏，漏了会导致数据存不上、读不出来，直接复制下面的代码，加在实体类后面就行：
// JSON转实体（读取本地数据时用）factoryGoodsModel.fromJson(Map<String,dynamic>json){returnGoodsModel(id:json['id'],title:json['title'],price:json['price'].toDouble(),category:json['category'],condition:json['condition'],desc:json['desc'],time:json['time'],);}// 实体转JSON（保存本地数据时用）Map<String,dynamic>toJson(){return{'id':id,'title':title,'price':price,'category':category,'condition':condition,'desc':desc,'time':time,};}新手提醒（避坑重点）
- 字段类型不要错：price是double（支持小数），id、title等是String，错了会报类型转换错误；
- 所有字段都用required修饰，确保创建商品时，必须填写这些信息，避免空值；
- 序列化代码一定要和字段名一致，比如json[‘id’]对应this.id，不能写错，否则读不到数据。
二、预置校园闲置全部分类常量（统一管理）
校园闲置和普通闲置不一样，分类要贴合学生需求，咱们预置6个常用分类，后续可以随时新增，不用改其他代码，统一放在config文件夹里，方便维护，符合工程化规范。
核心代码（直接复制到config/app_constant.dart）
classAppConstant{// 校园闲置全部分类（贴合学生需求）staticconstList<String>goodsCategory=["全部","数码产品","校园书籍","生活用品","美妆护肤","运动器材"];// 商品成色选项（发布闲置时用）staticconstList<String>goodsCondition=["全新未拆封","九成新","八成新","七成新","六成及以下"];}分类说明（贴合校园场景，实用不冗余）
- 全部：默认选项，展示所有闲置商品；
- 数码产品：手机、平板、耳机、键盘等（学生最常交易的品类）；
- 校园书籍：教材、辅导书、小说等（学生闲置最多的物品）；
- 生活用品：被子、水壶、收纳盒等（毕业季大量闲置）；
- 美妆护肤：学生常用的护肤品、化妆品（女生交易需求高）；
- 运动器材：篮球、羽毛球拍、瑜伽垫等（校园运动必备）。
新手避坑
把分类做成常量，后续不管是首页分类标签、发布闲置的分类选择，都直接调用这个常量，不用到处手写字符串，避免写错、写漏，后期想新增分类（比如“文具”），只改这一处就行，非常方便。
三、搭建首页顶部分类横向标签栏（核心UI）
上一期我们搭好了首页的容器，今天就给首页加“顶部分类标签”——横向可滑动，选中状态高亮，贴合鸿蒙简约UI风格，和咱们之前备忘录的分类标签栏逻辑类似，但样式更贴合校园APP的清新感，新手可以直接参考，不用重新想布局。
第一步：在首页页面（page/home/home_page.dart）编写标签栏布局
先新建home_page.dart文件，然后复制下面的代码，核心是用ListView.builder做横向滚动，适配多分类，不会挤压布局：
import'package:flutter/material.dart';import'package:campus_flea_market/config/app_color.dart';import'package:campus_flea_market/config/app_constant.dart';classHomePageextendsStatefulWidget{constHomePage({super.key});@overrideState<HomePage>createState()=>_HomePageState();}class_HomePageStateextendsState<HomePage>{// 当前选中的分类，默认选中“全部”String_currentCategory=AppConstant.goodsCategory[0];@overrideWidgetbuild(BuildContextcontext){returnScaffold(backgroundColor:AppColor.bgGray,body:Column(children:[// 顶部分类横向标签栏_buildCategoryTab(),// 后续添加商品列表，今天先做标签栏],),);}}第二步：封装分类标签栏组件（核心代码）
在HomePage类里，新增一个_buildCategoryTab方法，封装标签栏，代码精简，样式贴合鸿蒙风格，5-6行核心布局：
// 封装顶部分类标签栏Widget_buildCategoryTab(){returnSizedBox(height:48,child:ListView.builder(scrollDirection:Axis.horizontal,// 横向滚动itemCount:AppConstant.goodsCategory.length,itemBuilder:(ctx,index){Stringcategory=AppConstant.goodsCategory[index];// 判断是否选中，设置不同样式bool isSelected=_currentCategory==category;return_buildCategoryItem(category,isSelected);},),);}第三步：封装单个分类标签样式（适配鸿蒙UI）
再新增一个_buildCategoryItem方法，控制单个标签的样式——选中时用主色背景、白色文字，未选中时用灰色背景、黑色文字，圆角胶囊样式，贴合鸿蒙原生控件审美：
// 单个分类标签样式Widget_buildCategoryItem(Stringcategory,bool isSelected){returnContainer(margin:constEdgeInsets.symmetric(horizontal:8,vertical:8),padding:constEdgeInsets.symmetric(horizontal:16,vertical:6),decoration:BoxDecoration(color:isSelected?AppColor.primary:AppColor.white,borderRadius:BorderRadius.circular(20),// 圆角胶囊boxShadow:[BoxShadow(color:Colors.black12,blurRadius:2)],),child:Text(category,style:TextStyle(color:isSelected?AppColor.white:AppColor.textBlack,fontSize:14,),),);}四、实现分类标签切换逻辑（点击生效）
标签栏做好了，还要实现“点击切换”——点击不同分类，选中状态变化，后续还要根据选中的分类筛选商品，今天先实现状态切换，逻辑非常简单，新手一看就懂。
核心代码（修改标签点击事件）
在_buildCategoryItem方法里，给Container加一个点击事件，点击后更新选中的分类，刷新UI：
// 给单个标签加点击事件GestureDetector(onTap:(){setState((){_currentCategory=category;// 更新选中的分类});// 后续添加筛选商品逻辑，DAY3实现},child:Container(// 之前的标签样式代码，不变),)逻辑说明
- 用GestureDetector包裹标签容器，实现点击事件；
- 点击后，通过setState更新_currentCategory变量，切换选中状态；
- 选中状态变化后，标签的背景色、文字色会自动切换，视觉反馈清晰，符合用户习惯；
- 筛选商品的逻辑，我们DAY3再写，今天先把“切换状态”做好，循序渐进，不贪多。
五、DAY2 细节优化（毕设加分项）
- 补全注释：给实体类、每个方法、每个字段都加注释，比如给GoodsModel加“闲置商品实体类，承载商品所有信息”，老师看代码会更认可；
- 适配屏幕：给标签栏的高度、内边距做简单适配，避免小屏手机标签挤压，后续用flutter_screenutil完善；
- 测试兼容性：运行项目，确认分类标签能正常横向滑动、点击切换选中状态，实体类无报错，和DAY1的底部Tab框架无缝衔接；
- 统一样式：标签的圆角、间距、字体大小和全局配色保持一致，不出现杂乱的样式，贴合鸿蒙简约设计。
六、常见问题答疑（新手必看，避坑）
问题1：实体类序列化报错，提示“没有fromJson方法”？
原因：要么漏写了序列化代码，要么代码写错了字段名；
解决：直接复制本文中的序列化代码，确保字段名和实体类一致，比如json[‘id’]对应this.id，不能多写或少写字母。
问题2：分类标签不能横向滚动，挤在一起？
原因：没给ListView.builder设置scrollDirection: Axis.horizontal；
解决：检查_buildCategoryTab方法里的ListView.builder，加上scrollDirection: Axis.horizontal，重启运行即可。
问题3：点击标签，选中状态不变化？
原因：没给标签加点击事件，或者没调用setState更新状态；
解决：用GestureDetector包裹标签容器，在onTap里调用setState，更新_currentCategory变量。
✅ DAY2 小结 & DAY3 预告
今天我们完成了3个核心任务，都是后续开发的基础，难度不高，新手完全能跟上：
- 编写了闲置商品实体类，加上了JSON序列化，能正常适配本地存储；
- 预置了校园闲置全部分类和商品成色常量，统一管理，方便后续拓展；
- 搭建了首页顶部分类横向标签栏，实现了点击切换选中状态，样式贴合鸿蒙UI。
现在咱们的APP，已经有了“框架+基础数据+核心UI”，下一步就是填充商品列表，让首页真正“活”起来！
DAY3 预告
DAY3 我们重点做3件事，难度依旧循序渐进，不跳步：
- 封装闲置商品卡片组件（goods_card.dart），展示商品标题、价格、分类、成色，样式美观，适配鸿蒙风格；
- 模拟假数据（贴合校园场景），渲染首页商品列表，实现列表懒加载，避免卡顿；
- 实现“分类筛选”核心逻辑，点击不同分类标签，筛选对应商品，实现分类和列表联动。
