Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY6顶部搜索栏关键词模糊检索标题内容双匹配搜索分类组合筛选欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net大家好欢迎来到Flutter鸿蒙智能备忘录实战DAY6前面DAY1搭建项目架构、DAY2完成笔记模型与列表卡片、DAY3实现新增笔记持久化、DAY4搞定编辑删除、DAY5上线分类标签筛选与空数据兜底。今天DAY6重点升级检索能力在首页顶部搭建鸿蒙风格搜索输入框、实现关键词模糊搜索、支持标题内容双向匹配、搜索与分类标签联动组合筛选、清空搜索、实时检索交互优化让备忘录具备快速查找笔记的实用能力。 本期开发目标首页顶部新增鸿蒙风格搜索输入框带搜索图标与清空按钮定义搜索输入控制器监听输入变化实现实时检索编写模糊匹配算法同时匹配笔记标题、正文内容关键词实现搜索分类标签双重条件组合筛选数据精准过滤封装搜索清空逻辑一键恢复默认全部分类列表优化搜索栏UI圆角、配色、内边距适配OpenHarmony设计风格无搜索结果时复用空数据占位页统一兜底体验 第一步首页搭建顶部搜索布局在分类标签栏上方新增搜索框采用圆角圆角输入框、左侧搜索图标、右侧清空按钮整体贴合鸿蒙原生应用搜索栏样式。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_searchCtrlTextEditingController();StringsearchKey;overridevoiddispose(){_searchCtrl.dispose();super.dispose();}和之前笔记编辑控制器写法保持一致规范生命周期管理适配鸿蒙后台驻留机制。 第三步实现输入实时检索回调输入框内容实时变化时同步更新关键词并触发分类搜索组合筛选输入即检索不用点击搜索按钮。voidonSearchTextChange(Stringvalue){setState((){searchKeyvalue.trim();});filterNoteByTagAndSearch();}极简回调逻辑把关键词赋值后直接进入组合筛选方法代码解耦、便于维护。 第四步编写标题内容模糊匹配规则核心匹配逻辑不区分大小写只要标题包含关键词 或 内容包含关键词就匹配展示实现全局模糊检索。boolnoteMatchKey(NoteModelnote,Stringkey){if(key.isEmpty)returntrue;StringlowerKeykey.toLowerCase();StringlowerTitlenote.title.toLowerCase();StringlowerContentnote.content.toLowerCase();returnlowerTitle.contains(lowerKey)||lowerContent.contains(lowerKey);}统一转小写匹配规避大小写影响检索结果逻辑通用后续可直接复用。 第五步分类搜索双重组合筛选整合之前的标签分类和现在的关键词搜索先按标签过滤再按关键词二次筛选实现双重条件精准过滤。voidfilterNoteByTagAndSearch(){ListNoteModeloriginListStorageUtil.getNoteList();ListNoteModeltempList[];// 第一步按分类标签筛选if(curSelectTag全部){tempListoriginList;}else{tempListoriginList.where((e)e.tagcurSelectTag).toList();}// 第二步按搜索关键词二次过滤if(searchKey.isNotEmpty){tempListtempList.where((e)noteMatchKey(e,searchKey)).toList();}setState((){showNoteListtempList;});}两层过滤逻辑清晰先分类、后搜索互不冲突任意切换分类或输入关键词都能实时刷新列表。❌ 第六步实现一键清空搜索功能点击搜索框右侧清空图标清空输入框、清空关键词、恢复默认列表展示交互简单易用。voidclearSearch(){_searchCtrl.clear();setState((){searchKey;});filterNoteByTagAndSearch();}清空后自动重新执行筛选页面立即恢复正常分类列表无需手动刷新。 第七步无搜索结果复用空占位页当分类筛选关键词检索后列表为空自动复用DAY5封装的空数据组件显示「暂无笔记内容」不用额外写新页面统一UI兜底风格。逻辑沿用之前三元判断有数据渲染笔记列表无数据展示空占位组件搜索无结果、分类无结果共用一套提示页简洁统一。✅ DAY6 真机运行实测效果首页顶部搜索栏布局完整图标、输入框、清空按钮样式美观适配鸿蒙输入文字实时检索支持标题、正文双向模糊匹配检索精准切换分类标签同时保留搜索关键词实现分类搜索组合筛选点击清空按钮一键重置搜索列表恢复正常展示交互流畅搜索无匹配内容时自动展示空数据占位页体验友好不突兀全控件圆角、阴影、配色统一和系统原生备忘录视觉风格一致。 DAY6 知识点总结 DAY7预告本节核心知识点Flutter 顶部搜索栏布局封装、图标与输入框组合排版技巧TextField 实时监听输入变化实现不用按钮的即时搜索不区分大小写模糊匹配算法多字段同时检索设计思路分类标签 关键词双重条件组合筛选的业务逻辑设计功能解耦封装匹配方法、筛选方法、清空方法单独拆分。下一节DAY7预告DAY7我们将开发实现笔记收藏功能收藏/取消收藏状态切换新增收藏专属分类标签只展示已收藏笔记收藏状态本地持久化保存重启APP不丢失列表条目增加收藏图标标识状态实时刷新优化全局状态联动收藏、分类、搜索互不影响