Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY5：分类标签选择+顶部筛选栏+标签筛选查询+空数据占位页-开发者社区

Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY5：分类标签选择+顶部筛选栏+标签筛选查询+空数据占位页

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

大家好，继续智能备忘录APP实战连载DAY5！
前四日已经完整实现笔记新建、本地持久化、编辑修改、长按删除、页面传参、全局弹窗整套增删改核心能力，基础业务闭环全部打通。
今天DAY5重点做分类体系建设，搭建顶部标签筛选导航栏、预置常用分类、新增编辑页可选标签、按标签筛选过滤笔记列表、定制空数据空白占位页面，完善分类管理与异常兜底体验，让备忘录从基础记事升级为有条理、可归类的实用工具，文风格式、代码体量、段落结构完全对齐前序所有篇章。

🚀 本期开发目标

预置系统通用分类标签常量，定义全部、个人、工作、学习、生活固定类别
封装顶部分类横向筛选导航栏，鸿蒙风格胶囊选中样式
改造新增/编辑笔记页面，加入标签下拉选择组件
实现按选中标签筛选过滤笔记列表，切换分类实时刷新UI
封装全局空数据占位页面，无笔记、筛选无结果统一兜底展示
优化选中状态管理，标签切换联动列表数据，交互逻辑闭环
完善样式细节，统一配色、圆角、间距，整体视觉风格一致

🏷️ 第一步：定义全局分类标签常量

在config常量文件中统一管理所有分类，集中维护，后续新增分类只需修改一处，便于长期迭代维护。

classAppTagConst{staticconstList<String>tagList=["全部","个人","工作","学习","生活"];}

统一常量约束，避免页面硬编码字符串，减少书写错误，符合工程化规范，适配后期拓展更多自定义标签。

🧭 第二步：搭建顶部横向分类筛选导航

在首页列表上方新增横向可滑动分类标签栏，采用胶囊式选中样式，未选中浅底色、选中主色调高亮，贴合鸿蒙原生控件审美。

ListView.builder(scrollDirection:Axis.horizontal,itemCount:AppTagConst.tagList.length,itemBuilder:(ctx,idx){Stringtag=AppTagConst.tagList[idx];returnContainer(margin:EdgeInsets.symmetric(horizontal:6),padding:EdgeInsets.symmetric(horizontal:14,vertical:6),decoration:BoxDecoration(color:curSelectTag==tag?Colors.blueAccent:Colors.black12,borderRadius:BorderRadius.circular(20),),child:Text(tag,style:TextStyle(color:curSelectTag==tag?Colors.white:Colors.black87)),);},)

横向滚动布局，多分类也不会挤压变形，选中状态实时绑定变量，切换视觉反馈清晰直观。

📝 第三步：新增标签选中状态管理变量

在首页状态类中定义当前选中分类，默认选中「全部」，作为筛选过滤的基准条件，统一控制全局筛选逻辑。

StringcurSelectTag="全部";voidchangeSelectTag(Stringtag){setState((){curSelectTag=tag;});filterNoteByTag();}

切换标签同步更新状态，立刻执行筛选方法，做到选完即刷新，无需额外操作，交互连贯顺畅。

📌 第四步：编辑页加入标签下拉选择器

改造新建、编辑笔记页面，增加下拉选择框，直接为笔记绑定对应分类标签，替代固定默认标签，实现自由归类。

DropdownButtonFormField<String>(decoration:InputDecoration(border:OutlineInputBorder(borderRadius:BorderRadius.circular(12)),hintText:"请选择分类标签",),value:widget.note.tag,items:AppTagConst.tagList.sublist(1).map((item){returnDropdownMenuItem(value:item,child:Text(item));}).toList(),onChanged:(val){selectTag=val??"个人";},)

剔除「全部」选项只展示业务分类，选择后绑定变量，保存笔记时同步写入标签字段，归类逻辑完整闭环。

🔍 第五步：实现按标签筛选过滤笔记列表

编写筛选核心方法，根据当前选中标签过滤原始本地数据，「全部」展示所有笔记，其余分类精准匹配对应标签数据。

voidfilterNoteByTag(){List<NoteModel>originList=StorageUtil.getNoteList();if(curSelectTag=="全部"){showNoteList=originList;}else{showNoteList=originList.where((e)=>e.tag==curSelectTag).toList();}setState((){});}

基于原始缓存数据过滤，不修改源数据，切换分类无数据丢失，逻辑安全可靠，适配频繁切换分类的操作场景。

🧩 第六步：封装通用空数据占位组件

统一制作空白占位页面，无任何笔记、筛选后无匹配数据两种场景复用，图文结合友好提示，替代光秃秃空白屏幕。

WidgetbuildEmptyWidget(){returnCenter(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(Icons.note_outlined,size:80,color:Colors.black26),SizedBox(height:12),Text("暂无笔记内容",style:TextStyle(color:Colors.grey,fontSize:15)),],),);}

极简素雅样式，契合鸿蒙简约设计风格，判断展示时机，列表为空时自动渲染占位页，提升用户体验。

⚖️ 第七步：列表与空页面条件渲染联动

做二元逻辑判断，有筛选数据正常渲染笔记列表，无数据自动展示空占位组件，全局兜底无空白界面、无异常突兀感。

showNoteList.isEmpty?buildEmptyWidget():ListView.builder(itemCount:showNoteList.length,itemBuilder:(ctx,index)=>noteItemCard(ctx,showNoteList[index]),)