Flutter 鸿蒙数据搜索功能实现：全文搜索与结果高亮

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

效果展示

搜索功能演示

模糊搜索效果

• 输入关键词"Flutter"
• 自动匹配标题和内容中的关键词
• 实时显示搜索结果数量
• 支持大小写敏感切换

精确搜索效果

• 输入完整标题"Flutter开发指南"
• 精确匹配完整字符串
• 快速定位目标数据

正则搜索效果

• 输入正则表达式"Flutter.*开发"
• 支持复杂模式匹配
• 灵活的搜索规则

结果高亮显示

高亮效果

• 匹配关键词自动标黄
• 粗体显示突出重点
• 清晰的视觉反馈
• 支持开关控制

实现步骤

1. 搜索算法实现

模糊搜索

bool fuzzySearch(String text, String keyword) {
  return text.toLowerCase().contains(keyword.toLowerCase());
}

精确搜索

bool exactSearch(String text, String keyword) {
  return text == keyword;
}

正则搜索

bool regexSearch(String text, String pattern) {
  try {
    final regex = RegExp(pattern, caseSensitive: false);
    return regex.hasMatch(text);
  } catch (e) {
    return false;
  }
}

2. 结果高亮实现

TextSpan高亮

List<TextSpan> highlightText(String text, String keyword) {
  if (keyword.isEmpty) {
    return [TextSpan(text: text)];
  }

  final spans = <TextSpan>[];
  int start = 0;
  int index = text.indexOf(keyword);
  
  while (index != -1) {
    if (index > start) {
      spans.add(TextSpan(text: text.substring(start, index)));
    }
    
    spans.add(TextSpan(
      text: text.substring(index, index + keyword.length),
      style: TextStyle(
        backgroundColor: Colors.yellow,
        fontWeight: FontWeight.bold,
      ),
    ));
    
    start = index + keyword.length;
    index = text.indexOf(keyword, start);
  }
  
  if (start < text.length) {
    spans.add(TextSpan(text: text.substring(start)));
  }
  
  return spans;
}

3. 搜索模式切换

模式选择

enum SearchMode {
  fuzzy,    // 模糊搜索
  exact,    // 精确搜索
  regex,    // 正则搜索
}

void performSearch(String keyword, SearchMode mode) {
  searchResults = allData.where((item) {
    final title = item['title'] as String;
    final content = item['content'] as String;
    
    switch (mode) {
      case SearchMode.fuzzy:
        return fuzzySearch(title, keyword) || 
               fuzzySearch(content, keyword);
      case SearchMode.exact:
        return exactSearch(title, keyword) || 
               exactSearch(content, keyword);
      case SearchMode.regex:
        return regexSearch(title, keyword) || 
               regexSearch(content, keyword);
    }
  }).toList();
}

4. 实时搜索优化

防抖处理

Timer? _debounceTimer;

void onSearchChanged(String keyword) {
  _debounceTimer?.cancel();
  _debounceTimer = Timer(Duration(milliseconds: 300), () {
    performSearch(keyword);
  });
}

性能优化

1. 搜索性能

大数据量优化

• 使用索引加速搜索
• 分页加载搜索结果
• 异步搜索避免阻塞

内存优化

• 及时释放搜索结果
• 避免深拷贝数据
• 使用Stream处理大数据

2. UI性能

列表优化

ListView.builder(
  itemCount: searchResults.length,
  itemBuilder: (context, index) {
    return SearchResultItem(result: searchResults[index]);
  },
)

高亮优化

• 缓存TextSpan结果
• 避免重复计算
• 使用const构造函数

使用说明

基本使用

1. 输入关键词

   • 在搜索框输入关键词
   • 自动触发搜索

2. 选择模式

   • 模糊搜索：包含关键词即可
   • 精确搜索：完全匹配
   • 正则搜索：正则表达式匹配

3. 查看结果

   • 实时显示搜索结果
   • 关键词高亮显示
   • 显示结果数量

高级功能

大小写敏感

SwitchListTile(
  title: Text('区分大小写'),
  value: caseSensitive,
  onChanged: (value) {
    setState(() => caseSensitive = value);
    performSearch(keyword);
  },
)

结果高亮开关

SwitchListTile(
  title: Text('高亮显示结果'),
  value: highlightResults,
  onChanged: (value) {
    setState(() => highlightResults = value);
  },
)

技术要点

1. 搜索算法选择

模糊搜索

• 适用场景：快速查找
• 性能：较好
• 精确度：一般

精确搜索

• 适用场景：精确匹配
• 性能：优秀
• 精确度：高

正则搜索

• 适用场景：复杂模式
• 性能：较差
• 灵活性：最高

2. 结果高亮策略

单关键词高亮

• 简单直接
• 性能好
• 用户体验佳

多关键词高亮

• 支持多个关键词
• 不同颜色区分
• 复杂度增加

3. 性能考虑

搜索延迟

• 防抖处理
• 避免频繁搜索
• 提升用户体验

结果缓存

• 缓存搜索结果
• 避免重复计算
• 提升响应速度

最佳实践

1. 搜索体验

• 提供实时搜索反馈
• 显示搜索结果数量
• 支持清空搜索
• 保留搜索历史

2. UI设计

• 清晰的搜索框
• 明显的高亮效果
• 合理的结果展示
• 流畅的动画效果

3. 错误处理

• 正则表达式错误提示
• 空搜索关键词处理
• 无结果时的友好提示
• 网络错误处理

总结

Flutter鸿蒙数据搜索功能实现了完整的全文搜索解决方案，包括：

• ✅ 多种搜索模式（模糊、精确、正则）
• ✅ 结果高亮显示
• ✅ 大小写敏感控制
• ✅ 实时搜索响应
• ✅ 性能优化处理

该功能为Flutter for OpenHarmony应用提供了强大的数据搜索能力，适用于各种数据检索场景。