鸿蒙原生开发手记：徒步迹 - 路线搜索与筛选功能

鸿蒙原生开发手记徒步迹 - 路线搜索与筛选功能实现多条件搜索和标签筛选一、前言搜索和筛选是列表页的核心交互。本文实现路线列表的搜索框实时搜索和难度标签筛选功能。二、搜索框实现Component struct SearchBar { State query: string ; State isSearching: boolean false; build() { Row() { TextInput({ placeholder: 搜索路线名称或地点, text: this.query, }) .layoutWeight(1) .backgroundColor(Color.Transparent) .fontSize(14) .onChange((value: string) { this.query value; this.onSearch(value); }); if (this.isSearching) { LoadingProgress().width(18).height(18).margin({ right: 12 }); } } .width(100%) .height(44) .backgroundColor(#FFF) .borderRadius(22) .padding({ left: 16 }); } onSearch(query: string): void { this.isSearching true; // debounce 搜索 setTimeout(() { AppStorage.setOrCreate(routeQuery, query); this.isSearching false; }, 300); } }三、筛选标签Component struct FilterTags { State selectedTag: string 全部; private tags: string[] [全部, 简单, 中等, 困难]; build() { Row() { ForEach(this.tags, (tag: string) { Text(tag) .fontSize(13) .fontColor(this.selectedTag tag ? Color.White : #666) .backgroundColor( this.selectedTag tag ? #4CAF50 : #FFF ) .borderRadius(16) .padding({ left: 16, right: 16, top: 6, bottom: 6 }) .margin({ right: 8 }) .onClick(() { this.selectedTag tag; AppStorage.setOrCreate(routeDifficulty, tag); }); }, (tag: string) tag); } .padding({ left: 16, right: 16 }); } }四、组合搜索与筛选function filterRoutes( routes: HikingRoute[], query: string, difficulty: string ): HikingRoute[] { return routes.filter(route { // 关键词匹配 const matchQuery !query || route.name.includes(query) || route.description.includes(query) || route.tags.some(t t.includes(query)); // 难度筛选 const matchDifficulty difficulty 全部 || route.difficulty difficulty; return matchQuery matchDifficulty; }); }五、总结搜索框结合筛选标签让用户可以快速找到感兴趣的路线。实时搜索配合 debounce 优化确保交互流畅。下一篇文章实现路线详情页布局。下一篇预告鸿蒙原生开发手记徒步迹 - 路线详情页布局实现