HarmonyOS应用开发实战萌宠日记 - 心情选择器设计与选中态管理前言心情选择器是萌宠日记日记编辑器中的一个特色功能模块用户可以通过选择五种表情来标记当前的心情状态。当某个心情被选中时其标签文字会变为品牌橙色其他未选中的保持灰色清晰的选中态视觉反馈让用户一目了然。本文将从萌宠日记的心情选择器实现出发深入解析 State 选中态管理、条件样式渲染、数据驱动 UI以及 Emoji 在交互组件中的应用。一、心情选择器整体设计1.1 数据模型// WriteDiaryPage.ets — 心情数据结构 interface MoodItem { emoji: string // 心情 Emoji label: string // 心情文字标签 } private moods: MoodItem[] [ { emoji: , label: 开心 }, { emoji: , label: 平静 }, { emoji: , label: 一般 }, { emoji: , label: 难过 }, { emoji: , label: 生气 } ]1.2 完整渲染// WriteDiaryPage.ets — 心情选择器 Column({ space: 8 }) { Text(心情) .fontSize(14) .fontColor(#999999) Row({ space: 16 }) { ForEach(this.moods, (mood: MoodItem, index: number) { Column({ space: 4 }) { Text(mood.emoji) .fontSize(28) Text(mood.label) .fontSize(11) .fontColor(this.selectedMood index ? #F5A623 : #999999) } .onClick(() { this.selectedMood index // 更新选中态 }) }) } .width(100%) .justifyContent(FlexAlign.Start) } .width(100%) .alignItems(HorizontalAlign.Start)提示心情选择器使用State selectedMood管理选中状态通过比较selectedMood index来决定每个心情项的样式。当用户点击某个心情时selectedMood更新UI 自动重新渲染并高亮对应的心情标签。二、选中态管理2.1 State 状态定义State selectedMood: number 0 // 默认选中第一个开心2.2 选中态样式切换// 选中高亮品牌橙色 // 未选中默认灰色 Text(mood.label) .fontColor(this.selectedMood index ? #F5A623 : #999999)2.3 选中态更新.onClick(() { this.selectedMood index // 更新状态 // State 变化 → UI 自动重渲染 })三、心情选择器的布局3.1 布局结构┌─────────────────────────────────────┐ │ 心情 │ ← 标签 │ │ │ │ ← Emoji 行space: 16 │ 开心 平静 一般 难过 生气 │ ← 标签行 │ 橙色 灰色 灰色 灰色 灰色 │ ← 选中态 └─────────────────────────────────────┘3.2 布局参数布局参数值说明Row space16vpEmoji 之间的间距Emoji 字号28fp大号 Emoji清晰可辨标签字号11fp小号标签文字标签间距4vpEmoji 与标签的间距四、ForEach 与索引4.1 索引参数ForEach(this.moods, (mood: MoodItem, index: number) { // index 参数用于比较选中态 Text(mood.label) .fontColor(this.selectedMood index ? #F5A623 : #999999) .onClick(() { this.selectedMood index }) })4.2 索引在渲染中的作用用途代码说明选中态比较selectedMood index判断当前项是否选中选中态更新selectedMood index更新选中状态五、心情 Emoji 选择5.1 Emoji 与心情的对应关系Emoji心情设计意图开心最常见的正面情绪平静温和的中性情绪一般无特殊情绪难过负面情绪生气强烈的负面情绪5.2 选择原则覆盖全面5 种心情覆盖正面、中性、负面普遍认知Emoji 含义明确用户一看就懂数量适中5 个选项不多不少选择成本低六、交互反馈6.1 点击反馈Column({ space: 4 }) { Text(mood.emoji).fontSize(28) Text(mood.label).fontSize(11) .fontColor(this.selectedMood index ? #F5A623 : #999999) } .onClick(() { this.selectedMood index // 更新选中态 // 可选添加触感反馈 // vibrator.vibrate() })6.2 视觉反馈状态标签颜色效果未选中#999999灰色柔和不突出选中#F5A623橙色高亮品牌色悬停无移动端无悬停—七、扩展多选模式7.1 多选数据模型// 多选模式可扩展 State selectedMoods: number[] [0] // 支持多选 // 切换选中状态 toggleMood(index: number): void { const idx this.selectedMoods.indexOf(index) if (idx -1) { this.selectedMoods.push(index) } else { this.selectedMoods.splice(idx, 1) } } // 判断是否选中 isSelected(index: number): boolean { return this.selectedMoods.includes(index) }八、无障碍适配Column({ space: 4 }) { Text(mood.emoji).fontSize(28) Text(mood.label).fontSize(11) } .accessibilityText(${mood.label}心情) .onClick(() { this.selectedMood index })九、最佳实践9.1 选择器设计原则有序列表 — 心情选择器设计的 5 个原则数量适中3-7 个选项最佳选择成本低视觉明确Emoji 文字标签消除歧义选中高亮选中项使用品牌色高亮一目了然默认值合理默认为最常见的心情开心间距舒适16vp 间距触摸区域充足9.2 萌宠日记心情选择器总结设计要素值说明选项数量5 个开心、平静、一般、难过、生气展示方式Emoji 文字28fp Emoji 11fp 文字选中色#F5A623品牌橙色未选中色#999999灰色间距16vpRow space默认值0开心默认正向情绪总结本文从萌宠日记的心情选择器实现出发深入解析了选中态管理的完整方法数据模型MoodItem 接口 5 种心情数据选中态管理State selectedMood 控制选中状态条件样式比较 selectedMood index 切换颜色布局设计Row 水平排列ForEach 动态渲染Emoji 选择覆盖全面、普遍认知、数量适中交互反馈点击更新选中态视觉即时反馈扩展模式多选模式的数据模型设计无障碍适配accessibilityText 描述心情心情选择器展示了 ArkTS 中 State 管理选中态的典型模式这一模式可推广到分类切换、标签选择等场景。下一篇我们将深入照片附件区与添加按钮布局解析日记编辑器中照片附件的设计与实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源State 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-stateForEach 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreachRow 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row事件处理https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-event-overviewEmoji 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/emoji-usage无障碍开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit颜色使用规范https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/color-usage交互设计https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/interaction-feedback
