Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY6：顶部搜索栏+关键词模糊检索+标题内容双匹配+搜索分类组合筛选

Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY6：顶部搜索栏+关键词模糊检索+标题内容双匹配+搜索分类组合筛选

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

大家好，欢迎来到Flutter鸿蒙智能备忘录实战DAY6！
前面DAY1搭建项目架构、DAY2完成笔记模型与列表卡片、DAY3实现新增笔记持久化、DAY4搞定编辑删除、DAY5上线分类标签筛选与空数据兜底。
今天DAY6重点升级检索能力，在首页顶部搭建鸿蒙风格搜索输入框、实现关键词模糊搜索、支持标题+内容双向匹配、搜索与分类标签联动组合筛选、清空搜索、实时检索交互优化，让备忘录具备快速查找笔记的实用能力。

🚀 本期开发目标

1. 首页顶部新增鸿蒙风格搜索输入框，带搜索图标与清空按钮
2. 定义搜索输入控制器，监听输入变化实现实时检索
3. 编写模糊匹配算法，同时匹配笔记标题、正文内容关键词
4. 实现搜索+分类标签双重条件组合筛选，数据精准过滤
5. 封装搜索清空逻辑，一键恢复默认全部分类列表
6. 优化搜索栏UI圆角、配色、内边距，适配OpenHarmony设计风格
7. 无搜索结果时复用空数据占位页，统一兜底体验

🔍 第一步：首页搭建顶部搜索布局

在分类标签栏上方新增搜索框，采用圆角圆角输入框、左侧搜索图标、右侧清空按钮，整体贴合鸿蒙原生应用搜索栏样式。

Container(margin:EdgeInsets.symmetric(horizontal:15,vertical:10),padding:EdgeInsets.symmetric(horizontal:12),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(16),boxShadow:[BoxShadow(color:Colors.black12,blurRadius:3)],),child:Row(children:[Icon(Icons.search,color:Colors.grey),SizedBox(width:10),Expanded(child:TextField(controller:_searchCtrl,decoration:InputDecoration(hintText:"搜索笔记标题/内容",border:InputBorder.none,),onChanged:onSearchTextChange,),),IconButton(icon:Icon(Icons.clear,color:Colors.grey),onPressed:clearSearch,)],),)

整体白色卡片阴影包裹，内部图标+输入框+清空按钮组合，布局紧凑美观，适配手机全宽显示。

📝 第二步：初始化搜索控制器与状态变量

定义搜索输入控制器、关键词变量，统一管理搜索状态，页面销毁及时释放资源，避免内存泄漏。

finalTextEditingController_searchCtrl=TextEditingController();StringsearchKey="";@overridevoiddispose(){_searchCtrl.dispose();super.dispose();}

和之前笔记编辑控制器写法保持一致，规范生命周期管理，适配鸿蒙后台驻留机制。

🔎 第三步：实现输入实时检索回调

输入框内容实时变化时，同步更新关键词并触发分类+搜索组合筛选，输入即检索，不用点击搜索按钮。

voidonSearchTextChange(Stringvalue){setState((){searchKey=value.trim();});filterNoteByTagAndSearch();}

极简回调逻辑，把关键词赋值后直接进入组合筛选方法，代码解耦、便于维护。

🧮 第四步：编写标题+内容模糊匹配规则

核心匹配逻辑：不区分大小写，只要标题包含关键词 或 内容包含关键词，就匹配展示，实现全局模糊检索。

boolnoteMatchKey(NoteModelnote,Stringkey){if(key.isEmpty)returntrue;StringlowerKey=key.toLowerCase();StringlowerTitle=note.title.toLowerCase();StringlowerContent=note.content.toLowerCase();returnlowerTitle.contains(lowerKey)||lowerContent.contains(lowerKey);}

统一转小写匹配，规避大小写影响检索结果，逻辑通用，后续可直接复用。

📊 第五步：分类+搜索双重组合筛选

整合之前的标签分类和现在的关键词搜索，先按标签过滤，再按关键词二次筛选，实现双重条件精准过滤。

voidfilterNoteByTagAndSearch(){List<NoteModel>originList=StorageUtil.getNoteList();List<NoteModel>tempList=[];// 第一步：按分类标签筛选if(curSelectTag=="全部"){tempList=originList;}else{tempList=originList.where((e)=>e.tag==curSelectTag).toList();}// 第二步：按搜索关键词二次过滤if(searchKey.isNotEmpty){tempList=tempList.where((e)=>noteMatchKey(e,searchKey)).toList();}setState((){showNoteList=tempList;});}

两层过滤逻辑清晰，先分类、后搜索，互不冲突，任意切换分类或输入关键词都能实时刷新列表。

❌ 第六步：实现一键清空搜索功能

点击搜索框右侧清空图标，清空输入框、清空关键词、恢复默认列表展示，交互简单易用。

voidclearSearch(){_searchCtrl.clear();setState((){searchKey="";});filterNoteByTagAndSearch();}

清空后自动重新执行筛选，页面立即恢复正常分类列表，无需手动刷新。

🧷 第七步：无搜索结果复用空占位页

当分类筛选+关键词检索后列表为空，自动复用DAY5封装的空数据组件，显示「暂无笔记内容」，不用额外写新页面，统一UI兜底风格。
逻辑沿用之前三元判断：
有数据渲染笔记列表，无数据展示空占位组件，搜索无结果、分类无结果共用一套提示页，简洁统一。

✅ DAY6 真机运行实测效果

1. 首页顶部搜索栏布局完整，图标、输入框、清空按钮样式美观适配鸿蒙；
2. 输入文字实时检索，支持标题、正文双向模糊匹配，检索精准；
3. 切换分类标签同时保留搜索关键词，实现分类+搜索组合筛选；
4. 点击清空按钮一键重置搜索，列表恢复正常展示，交互流畅；
5. 搜索无匹配内容时自动展示空数据占位页，体验友好不突兀；
6. 全控件圆角、阴影、配色统一，和系统原生备忘录视觉风格一致。

🎯 DAY6 知识点总结 & DAY7预告

本节核心知识点

1. Flutter 顶部搜索栏布局封装、图标与输入框组合排版技巧；
2. TextField 实时监听输入变化，实现不用按钮的即时搜索；
3. 不区分大小写模糊匹配算法，多字段同时检索设计思路；
4. 分类标签 + 关键词双重条件组合筛选的业务逻辑设计；
5. 功能解耦封装：匹配方法、筛选方法、清空方法单独拆分。

下一节DAY7预告

DAY7我们将开发：

• 实现笔记收藏功能，收藏/取消收藏状态切换
• 新增收藏专属分类标签，只展示已收藏笔记
• 收藏状态本地持久化保存，重启APP不丢失
• 列表条目增加收藏图标标识，状态实时刷新
• 优化全局状态联动，收藏、分类、搜索互不影响