鸿蒙原生开发手记：徒步迹 - 路线搜索与筛选功能
实现多条件搜索和标签筛选
一、前言
搜索和筛选是列表页的核心交互。本文实现路线列表的搜索框实时搜索和难度标签筛选功能。
二、搜索框实现
@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 优化，确保交互流畅。
下一篇文章实现路线详情页布局。
下一篇预告：鸿蒙原生开发手记：徒步迹 - 路线详情页布局实现
