open harmony 项目实战字典搜索功能的设计与防抖优化字典功能是语文学习 App 里非常实用的一环。用户可能想查成语也可能想查单个汉字还可能输入拼音进行搜索。“语文视界”的字典页支持成语和汉字统一搜索并加入了 300ms 防抖避免输入时频繁刷新页面。一、字典页的功能目标这个页面主要解决三个问题用户能查成语。用户能查汉字。用户输入汉字或拼音时都能得到结果。因此数据来源有两类import{ IDIOM_ENTRIES, IdiomEntry }from../../data/dictionary_data;import{ CHAR_ENTRIES, CharEntry }from../../data/char_data;二、页面状态设计字典页维护了搜索文本、当前 Tab、搜索结果和窗口宽度StatesearchText: string ;StateselectedTab: number 0;StatewindowWidth: number 360;StatesearchResults: string[] [];StorageProp(windowWidth)storedWidth: number 360;另外还有一个专门用于防抖的输入值StateprivatesearchInputValue:string;privatesearchTimer:number -1;searchInputValue记录用户正在输入的内容searchText则是防抖后真正生效的搜索内容。三、为什么要做防抖如果用户每输入一个字符就立刻检索页面会频繁刷新。数据量小的时候问题不大但体验上仍然容易抖动。项目里做了 300ms 防抖privatehandleSearchChange(value: string): void {this.searchInputValue value;if(this.searchTimer ! -1) { clearTimeout(this.searchTimer); }this.searchTimer setTimeout(() {this.searchText value;this.refreshSearchResults();this.searchTimer -1; },300); }这样用户连续输入时不会马上刷新停顿一下后再搜索体验更自然。四、页面销毁时清理定时器有防抖就要记得清理定时器aboutToDisappear():void{if(this.searchTimer! -1) {clearTimeout(this.searchTimer); } }这是一个小细节但能避免页面离开后还有延迟任务继续执行。五、成语搜索逻辑成语搜索同时匹配成语文本和拼音const kw this.searchInputValue.toLowerCase(); const idiomResults:string[][];letidi 0;while(idi IDIOM_ENTRIES.length) { const entry IDIOM_ENTRIES[idi]; const wordLower entry.word.toLowerCase(); const pyLower entry.pinyin.toLowerCase();if(wordLower.includes(kw)||pyLower.includes(kw)) { idiomResults.push(idi.toString()); } idi; }用户输入“山”、或者输入拼音片段都有机会匹配到结果。六、汉字搜索逻辑汉字搜索会匹配字本身和拼音前缀letci 0;while(ci CHAR_ENTRIES.length) {constentry CHAR_ENTRIES[ci];constch entry.char;constpyLower entry.pinyin.toLowerCase();if(ch kw || pyLower.startsWith(kw)) { charResults.push(ci.toString()); }ci; }这里用startsWith更符合拼音搜索习惯比如输入li可以匹配拼音以li开头的汉字。七、统一结果格式搜索结果最终会合并成字符串 keythis.searchResults [ ...idiomResults.map(iidiom_ i), ...charResults.map(ichar_ i) ];渲染时再根据前缀区分类型if(key.startsWith(idiom_)) { this.buildIdiomItemByIndex(parseInt(key.replace(idiom_,))); }elseif(key.startsWith(char_)) { this.buildCharacterCard(CHAR_ENTRIES[parseInt(key.replace(char_,))]); }这种方式简单直接适合本地数据规模不大的场景。八、无结果状态搜索没有结果时页面会展示空状态Text(没有找到相关结果).fontSize(16).fontColor(this.theme.textSecondary);Text(试试其他关键词吧 ♡).fontSize(14).fontColor(this.theme.placeholderText);不要小看空状态它会让用户知道“不是页面坏了只是没有搜到”。九、可以继续增强的方向后续可以继续做高亮搜索关键词。支持多音字搜索。支持模糊拼音。增加最近搜索历史。将搜索结果按相关度排序。数据量变大后改为索引表。总结字典搜索功能看似只是一个输入框但里面包含了数据结构、搜索策略、防抖优化、空状态和渲染分流。在 OpenHarmony 项目中先把端侧检索体验做好后续再扩展 AI 解释、例句推荐、学习卡片等能力就会顺滑很多。