时间维度切换：本周/本月/今年 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 选中/未选中状态

状态	文字颜色	背景色	边框	字重
选中	#FFFFFF	COLOR_PRIMARY	橙色	Bold
未选中	COLOR_AMBER	10% 橙色	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，深入讲解了时间维度切换的实现：

1. ForEach 渲染：三个按钮
2. 选中态样式：橙色背景 + 白色文字
3. layoutWeight 等分：均匀分布
4. onClick 切换：更新 selectedPeriod

下一篇文章将深入讲解AI 周报卡片，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

---

相关资源：

• Button 组件文档
• ForEach 文档
• layoutWeight 属性文档
• 海风日记项目源码
• [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
• 开源鸿蒙跨平台社区