时间维度切换：本周/本月/今年 Segmented Control

前言在“海风日记“的回顾页中时间维度切换按钮允许用户在本周、本月和今年三个维度之间切换查看不同时间范围内的写作统计。本文将从源码出发深入讲解 Segmented Control 的实现。一、Segmented Control 实现1.1 源码State selectedPeriod: number 0 // 0周, 1月, 2年 Row({ space: 8 }) { ForEach([本周,本月,今年], (label: string, i: number) { Button(label) .layoutWeight(1).height(34) .fontSize(13) .fontColor(this.selectedPeriod i ? #FFFFFF : COLOR_AMBER) .fontWeight(this.selectedPeriod i ? FontWeight.Bold : FontWeight.Normal) .backgroundColor(this.selectedPeriod i ? COLOR_PRIMARY : rgba(245,166,35,0.08)) .borderRadius(17) .border({ width: 1, color: this.selectedPeriod i ? COLOR_PRIMARY : rgba(245,166,35,0.20) }) .onClick(() { this.selectedPeriod i }) }) }1.2 选中/未选中状态状态文字颜色背景色边框字重选中#FFFFFFCOLOR_PRIMARY橙色Bold未选中COLOR_AMBER10% 橙色20% 橙色Normal二、时间维度切换.onClick(() { this.selectedPeriod i })切换selectedPeriod后UI 自动更新。实际应用中可以在此处根据selectedPeriod加载对应时间范围的数据。三、布局特点Row({ space: 8 }) { ForEach([本周,本月,今年], (label, i) { Button(label) .layoutWeight(1) // 等分宽度 .height(34) // 统一高度 .borderRadius(17) // 胶囊形 }) } .width(100%) .padding({ left: PAGE_PADDING, right: PAGE_PADDING })四、常见问题4.1 按钮宽度不一致问题三个按钮的宽度不同。原因按钮文字长度不同导致宽度自适应。解决方案使用layoutWeight(1)强制等分宽度。总结本文通过“海风日记“的 Segmented Control深入讲解了时间维度切换的实现ForEach 渲染三个按钮选中态样式橙色背景 白色文字layoutWeight 等分均匀分布onClick 切换更新 selectedPeriod下一篇文章将深入讲解AI 周报卡片敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Button 组件文档ForEach 文档layoutWeight 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区