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

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

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

🚀 本期开发目标

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

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

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

class AppTagConst {
  static const List<String> tagList = [
    "全部",
    "个人",
    "工作",
    "学习",
    "生活"
  ];
}

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

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

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

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: AppTagConst.tagList.length,
  itemBuilder: (ctx,idx){
    String tag = AppTagConst.tagList[idx];
    return Container(
      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
      )),
    );
  },
)

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

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

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

String curSelectTag = "全部";

void changeSelectTag(String tag){
  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){
    return DropdownMenuItem(value: item,child: Text(item));
  }).toList(),
  onChanged: (val){
    selectTag = val ?? "个人";
  },
)

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

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

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

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

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

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

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

Widget buildEmptyWidget(){
  return Center(
    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]),
)

条件渲染结构清晰，一处判断统一管控两种展示形态，后续拓展其他兜底样式只需修改对应组件即可。

✅ DAY5 真机运行实测效果

1. 顶部分类标签导航栏展示正常，横向滑动流畅，选中高亮状态区分明显；
2. 新增、编辑笔记页面可自由选择分类标签，绑定归类信息持久化存储；
3. 切换不同分类标签，列表实时精准过滤对应笔记，数据筛选无误；
4. 无笔记或筛选无结果时，自动展示空数据占位页，提示友好美观；
5. 全部分类切换逻辑顺畅，状态同步统一，无数据错乱、无状态残留；
6. 所有控件圆角、配色、间距统一，整体UI高度契合OpenHarmony设计规范。

🎯 DAY5 知识点总结 & DAY6预告

本节核心知识点

1. 全局常量统一管理分类标签，工程化规范开发思路；
2. 横向可滚动筛选标签栏、胶囊选中样式UI封装技巧；
3. 下拉选择器业务分类绑定，完善笔记归类业务流程；
4. 条件过滤实现分类筛选查询，源数据与展示数据分离思想；
5. 通用空状态占位组件封装，全场景异常兜底优化方案。

下一节DAY6预告

DAY6我们将开发：

• 实现笔记关键词模糊搜索功能，顶部新增搜索输入框
• 编写搜索匹配逻辑，按标题、内容双向模糊查询
• 优化搜索交互，清空按钮、回车搜索、实时检索
• 整合搜索、分类双重筛选，组合条件过滤笔记数据
• 优化页面层级布局，合理排布搜索栏、分类栏、列表区