HarmonyOS应用开发实战：萌宠日记 - 时间轴筛选与排序功能

HarmonyOS应用开发实战萌宠日记 - 时间轴筛选与排序功能前言筛选与排序是时间轴列表的进阶功能它帮助用户按不同维度查看成长事件。在萌宠日记的GrowthTimelinePage中顶部有一个筛选按钮▽点击后可弹出筛选面板提供按时间排序、按类型筛选、只看特殊事件等选项让用户灵活地浏览成长记录。本文将从萌宠日记时间轴筛选功能的实现出发深入解析筛选按钮设计、排序逻辑、数据过滤、筛选面板 UI以及筛选状态的 UI 反馈。一、筛选功能整体架构1.1 功能需求功能说明优先级按日期排序正向/反向排序P0按年龄排序按年龄大小排序P1只看特殊事件只显示生日等特殊事件P0按年份筛选选择特定年份的事件P2重置筛选恢复默认显示P01.2 数据流用户点击筛选按钮 → 弹出筛选面板 → 选择筛选条件 ↓ 更新 State 筛选状态 → 触发计算属性重新计算 ↓ sortedData 返回过滤后的数据 → UI 自动更新 ↓ 时间轴列表重新渲染二、筛选按钮设计2.1 筛选按钮实现// GrowthTimelinePage.ets — 筛选按钮 Row() { Blank() Text(▽) .fontSize(16) .fontColor(#666666) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(#F5F5F5) .borderRadius(16) .onClick(() { this.showFilterOptions() }) } .width(100%) .padding({ right: 16, top: 8 })2.2 按钮样式参数参数值说明图标▽向下箭头暗示可展开字号16fp适中大小颜色#666666灰色背景色#F5F5F5浅灰背景圆角16vp胶囊形位置右上角不遮挡内容三、排序筛选逻辑3.1 排序选项State sortBy: date | age date State filterSpecial: boolean false State filterYear: string all // 排序后的数据 get sortedData(): TimelineItem[] { let data [...this.timelineData] // 按年份筛选 if (this.filterYear ! all) { data data.filter(item item.date.startsWith(this.filterYear)) } // 只看特殊事件 if (this.filterSpecial) { data data.filter(item item.isSpecial) } // 排序 data.sort((a, b) { if (this.sortBy date) { return b.date.localeCompare(a.date) // 按日期降序 } else { return b.age.localeCompare(a.age) // 按年龄降序 } }) return data }3.2 排序方式对比排序方式排序字段效果适用场景按日期降序date最新事件在前默认按日期升序date反转最早事件在前回顾按年龄降序age最近事件在前查看成长四、筛选面板实现4.1 筛选面板 UIState showFilterPanel: boolean false showFilterOptions(): void { this.showFilterPanel !this.showFilterPanel } // 筛选面板 if (this.showFilterPanel) { Column({ space: 12 }) { Text(筛选排序) .fontSize(16).fontWeight(FontWeight.Bold) // 排序方式 Text(排序方式).fontSize(14).fontColor(#999999) Row({ space: 8 }) { Text(按日期) .fontSize(13) .fontColor(this.sortBy date ? #FFFFFF : #666666) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(this.sortBy date ? #F5A623 : #F5F5F5) .borderRadius(16) .onClick(() { this.sortBy date }) Text(按年龄) .fontSize(13) .fontColor(this.sortBy age ? #FFFFFF : #666666) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(this.sortBy age ? #F5A623 : #F5F5F5) .borderRadius(16) .onClick(() { this.sortBy age }) } // 只看特殊事件 Row() { Text(只看特殊事件).fontSize(14) Blank() Toggle({ type: ToggleType.Switch, isOn: this.filterSpecial }) .onChange((v) { this.filterSpecial v }) } // 重置按钮 Button(重置) .width(100%).height(36) .fontColor(#F5A623).backgroundColor(#FFF3E0) .borderRadius(18) .onClick(() { this.sortBy date this.filterSpecial false this.filterYear all }) } .width(100%).padding(16) .backgroundColor(#FFFFFF).borderRadius(16) .shadow({ radius: 8, color: #20000000, offsetY: 4 }) }五、筛选状态指示5.1 激活状态// 筛选激活时按钮高亮 get isFilterActive(): boolean { return this.sortBy ! date || this.filterSpecial || this.filterYear ! all } Text(▽) .fontSize(16) .fontColor(this.isFilterActive ? #F5A623 : #666666) .backgroundColor(this.isFilterActive ? #FFF3E0 : #F5F5F5) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .borderRadius(16)六、筛选结果统计6.1 结果数量// 显示筛选后的结果数量 Text(共 ${this.sortedData.length} 条记录) .fontSize(12).fontColor(#999999) .padding({ right: 16 })七、筛选与列表的联动7.1 数据绑定// 使用 sortedData 作为列表数据源 List({ space: 0 }) { ForEach(this.sortedData, (item: TimelineItem, index: number) { ListItem() { this.TimelineItemView(item, index) } }) }八、筛选的持久化8.1 保存筛选偏好// 保存筛选偏好到 Preferences async saveFilterPreferences(): Promisevoid { const pref await preferences.getPreferences(this.context, timeline_pref) await pref.put(sortBy, this.sortBy) await pref.put(filterSpecial, JSON.stringify(this.filterSpecial)) await pref.flush() } // 加载筛选偏好 async loadFilterPreferences(): Promisevoid { const pref await preferences.getPreferences(this.context, timeline_pref) this.sortBy await pref.get(sortBy, date) as date | age this.filterSpecial JSON.parse(await pref.get(filterSpecial, false)) }九、筛选动画9.1 面板展开动画State panelHeight: number 0 State panelOpacity: number 0 showFilterOptions(): void { this.showFilterPanel !this.showFilterPanel if (this.showFilterPanel) { animateTo({ duration: 300 }, () { this.panelHeight 200 this.panelOpacity 1 }) } else { animateTo({ duration: 200 }, () { this.panelHeight 0 this.panelOpacity 0 }) } }十、最佳实践10.1 筛选功能设计原则有序列表 — 筛选功能设计的 5 个原则按钮可见筛选按钮放在列表顶部易于发现状态可感知筛选激活时按钮高亮提示用户结果可预期筛选条件改变后立即可见结果重置方便提供一键重置筛选条件持久化筛选偏好保存在本地10.2 萌宠日记筛选功能总结功能模块技术实现说明筛选按钮Text onClick右上角 ▽ 图标排序sortBy State日期/年龄排序过滤filterSpecial State只看特殊事件筛选面板条件渲染弹出/收起动画状态指示isFilterActive 计算属性按钮高亮持久化Preferences保存筛选偏好总结本文从萌宠日记的时间轴筛选与排序功能实现出发深入解析了筛选功能的完整方案筛选按钮▽ 图标点击弹出选项排序逻辑按日期/年龄排序数据过滤筛选特殊事件筛选面板胶囊按钮 Toggle 开关状态指示激活时按钮高亮结果统计显示筛选后的记录数量筛选持久化Preferences 保存偏好面板动画展开/收起过渡10.3 与时间轴列表的完整集成// 筛选与时间轴列表的完整集成 build() { Column() { // 筛选按钮 this.FilterButton() // 筛选面板条件渲染 if (this.showFilterPanel) { this.FilterPanel() } // 筛选结果统计 Text(共 ${this.sortedData.length} 条记录) .fontSize(12).fontColor(#999999) .width(100%).textAlign(TextAlign.End) .padding({ right: 16, top: 4 }) // 时间轴列表 List({ space: 0 }) { ForEach(this.sortedData, (item: TimelineItem, index: number) { ListItem() { this.TimelineItemView(item, index) } }) } .width(100%).layoutWeight(1) } .width(100%).height(100%) .backgroundColor(#FFF8F0) }10.4 筛选功能测试用例// 筛选功能测试 describe(Timeline Filter, () { it(should default to date sort, () { expect(sortBy).toBe(date) }) it(should filter special events, () { filterSpecial true expect(sortedData.every(item item.isSpecial)).toBe(true) }) it(should reset all filters, () { filterSpecial true sortBy age // 重置 sortBy date filterSpecial false expect(sortBy).toBe(date) expect(filterSpecial).toBe(false) }) })十一、筛选功能的无障碍设计11.1 无障碍适配// 筛选按钮的无障碍描述 Text(▽) .fontSize(16) .fontColor(#666666) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(#F5F5F5) .borderRadius(16) .accessibilityText(筛选排序当前状态按日期排序) .onClick(() { this.showFilterOptions() })11.2 筛选面板无障碍// 筛选面板的无障碍描述 Column({ space: 12 }) { // 筛选内容 } .accessibilityText(筛选面板包含排序方式和筛选条件)十二、筛选功能的扩展12.1 多条件组合筛选interface FilterConditions { sortBy: date | age filterSpecial: boolean filterYear: string filterType: all | birthday | milestone | daily searchQuery: string } State filters: FilterConditions { sortBy: date, filterSpecial: false, filterYear: all, filterType: all, searchQuery: } // 组合筛选 get filteredAndSearchedData(): TimelineItem[] { let data [...this.timelineData] if (this.filters.filterYear ! all) { data data.filter(item item.date.startsWith(this.filters.filterYear)) } if (this.filters.filterSpecial) { data data.filter(item item.isSpecial) } if (this.filters.searchQuery) { data data.filter(item item.title.includes(this.filters.searchQuery) ) } return data }12.2 搜索功能// 搜索输入框 TextInput({ placeholder: 搜索事件... }) .width(100%).height(36) .backgroundColor(#F5F5F5).borderRadius(18) .padding({ left: 12 }) .onChange((value: string) { this.filters.searchQuery value })如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源数据排序https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/array-sort条件渲染https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-condition-variable-introductionState 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-statePreferences 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/data-persistence-by-preferences动画开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-animationToggle 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-toggle交互反馈https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/interaction-feedback开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net