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,
      )
    ],
  ),
)

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

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

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

final TextEditingController _searchCtrl = TextEditingController();
String searchKey = "";

@override
void dispose() {
  _searchCtrl.dispose();
  super.dispose();
}

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

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

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

void onSearchTextChange(String value){
  setState(() {
    searchKey = value.trim();
  });
  filterNoteByTagAndSearch();
}

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

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

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

bool noteMatchKey(NoteModel note,String key){
  if(key.isEmpty) return true;
  String lowerKey = key.toLowerCase();
  String lowerTitle = note.title.toLowerCase();
  String lowerContent = note.content.toLowerCase();
  return lowerTitle.contains(lowerKey) || lowerContent.contains(lowerKey);
}

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

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

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

void filterNoteByTagAndSearch(){
  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;
  });
}

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

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

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

void clearSearch(){
  _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不丢失
• 列表条目增加收藏图标标识，状态实时刷新
• 优化全局状态联动，收藏、分类、搜索互不影响