HarmonyOS应用开发实战萌宠日记 - 性别标签与状态徽章组件前言标签和徽章是 UI 设计中用于标识状态和分类信息的轻量级组件。在萌宠日记中我们使用性别标签标识宠物性别♂/♀使用状态徽章标识健康状态正常/异常这些小巧的组件在信息展示中起到了画龙点睛的作用。本文将从萌宠日记的性别标签实现出发深入解析标签组件的内联样式设计、状态徽章的颜色语义、以及标签组件的封装复用。一、性别标签实现1.1 核心代码// HomePage.ets — 性别标签 Text(♂) .fontSize(12) .fontColor(#42A5F5) .backgroundColor(#E3F2FD) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8)1.2 标签样式分解样式属性值作用fontSize12小字号不占用太多空间fontColor#42A5F5蓝色文字代表雄性backgroundColor#E3F2FD浅蓝色背景与文字色同色系padding{ left: 6, right: 6, top: 2, bottom: 2 }内边距避免文字贴近边框borderRadius8圆角使标签更柔和提示性别标签使用内联样式直接写在 Text 组件上没有封装为独立的组件。这是因为标签样式简单、使用场景固定内联方式更直接高效。二、性别标签的语义化设计2.1 颜色语义萌宠日记中性别标签的颜色选择遵循通用认知性别符号文字色背景色寓意雄性♂#42A5F5蓝色#E3F2FD浅蓝蓝色代表男性雌性♀#EC407A粉色#FCE4EC浅粉粉色代表女性2.2 性别标签的扩展// 根据性别动态渲染标签 Component export struct GenderTag { Prop gender: string male build() { if (this.gender male) { Text(♂) .fontSize(12) .fontColor(#42A5F5) .backgroundColor(#E3F2FD) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) } else { Text(♀) .fontSize(12) .fontColor(#EC407A) .backgroundColor(#FCE4EC) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) } } }三、标签的布局与对齐3.1 标签在 Row 中的位置Row({ space: 8 }) { Text(豆豆) .fontSize(20) .fontWeight(FontWeight.Bold) Text(♂) // 性别标签紧跟在名称后面 .fontSize(12) .fontColor(#42A5F5) .backgroundColor(#E3F2FD) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) }3.2 标签与文字的垂直对齐Text 组件的默认垂直对齐方式是基线对齐因此小字号的性别标签会自动与大字号的名称底部对齐看起来自然协调。四、状态徽章设计4.1 健康状态徽章// HealthRecordPage.ets — 健康状态徽章 Text(record.status) // 正常 或 异常 .fontSize(12) .fontColor(record.statusColor) // #4CAF50 绿色 .backgroundColor(#E8F5E9) // 浅绿色背景 .padding({ left: 8, right: 8, top: 2, bottom: 2 }) .borderRadius(8)4.2 状态颜色对照表状态文字色背景色语义正常#4CAF50绿色#E8F5E9浅绿健康、安全异常#F44336红色#FFEBEE浅红警告、问题待处理#FF9800橙色#FFF3E0浅橙提醒、注意已完成#42A5F5蓝色#E3F2FD浅蓝完成、已处理五、标签的状态管理5.1 动态状态// 状态标签数据 interface WeightRecord { date: string weight: string status: string // 正常 或 异常 statusColor: string // 对应的颜色 } // 渲染状态标签 ForEach(this.weightRecords, (record: WeightRecord) { Text(record.status) .fontSize(12) .fontColor(record.statusColor) .backgroundColor(this.getStatusBgColor(record.statusColor)) .padding({ left: 8, right: 8, top: 2, bottom: 2 }) .borderRadius(8) }) // 根据状态颜色获取背景色 getStatusBgColor(textColor: string): string { const colorMap: Recordstring, string { #4CAF50: #E8F5E9, // 绿色 → 浅绿背景 #F44336: #FFEBEE, // 红色 → 浅红背景 #FF9800: #FFF3E0, // 橙色 → 浅橙背景 #42A5F5: #E3F2FD, // 蓝色 → 浅蓝背景 } return colorMap[textColor] || #F5F5F5 }六、标签的封装复用6.1 通用标签组件// 通用标签组件 Component export struct Tag { Prop text: string Prop textColor: string #666666 Prop bgColor: string #F5F5F5 Prop fontSize: number 12 Prop paddingValue: number 8 build() { Text(this.text) .fontSize(this.fontSize) .fontColor(this.textColor) .backgroundColor(this.bgColor) .padding({ left: this.paddingValue, right: this.paddingValue, top: 2, bottom: 2 }) .borderRadius(8) } } // 使用示例 Tag({ text: ♂, textColor: #42A5F5, bgColor: #E3F2FD }) Tag({ text: 正常, textColor: #4CAF50, bgColor: #E8F5E9 })6.2 标签组件参数参数类型默认值说明textstring标签文字textColorstring#666666文字颜色bgColorstring#F5F5F5背景颜色fontSizenumber12字号paddingValuenumber8左右内边距七、标签在 ForEach 中的渲染7.1 列表中的标签// ReminderPage.ets — 提醒列表中的标签 ForEach(this.reminders, (item: ReminderItem) { ListItem() { Row({ space: 12 }) { // 图标 Column() { Text(item.icon).fontSize(24) } .width(44).height(44) .backgroundColor(item.iconBg) .borderRadius(12) // 标题和日期 Column({ space: 4 }) { Text(item.title).fontSize(15).fontWeight(FontWeight.Medium) Text(${item.date} (${item.daysLeft})).fontSize(12).fontColor(#999999) } Blank() Text(›).fontSize(18).fontColor(#CCCCCC) } .width(100%).padding(16) .backgroundColor(#FFFFFF).borderRadius(12) } })7.2 标签的选中态// 分类标签的选中态切换 State selectedCategory: number 0 ForEach(this.categories, (category: HealthCategory, index: number) { Column({ space: 4 }) { Column() { Text(category.icon).fontSize(22) } .width(44).height(44) .backgroundColor(category.color) .borderRadius(12) Text(category.label) .fontSize(11) .fontColor(this.selectedCategory index ? #F5A623 : #666666) } .onClick(() { this.selectedCategory index // 更新选中态 }) })八、标签组件的交互8.1 可点击标签// 可点击的标签如热门话题标签 Text(topic.label) .fontSize(13) .fontColor(#F5A623) .padding({ left: 12, right: 12, top: 8, bottom: 8 }) .backgroundColor(topic.color) .borderRadius(16) .onClick(() { console.log(Topic clicked:, topic.label) // 跳转到话题详情页 })8.2 标签的触摸反馈// 点击标签时添加视觉反馈 Text(topic.label) .fontSize(13) .fontColor(#F5A623) .padding({ left: 12, right: 12, top: 8, bottom: 8 }) .backgroundColor(topic.color) .borderRadius(16) .hitTestBehavior(HitTestMode.Block) // 确保点击事件正确响应 .onClick(() { // 点击处理 })九、标签组件的无障碍9.1 无障碍标签// 为标签添加无障碍描述 Text(♂) .fontSize(12) .fontColor(#42A5F5) .backgroundColor(#E3F2FD) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) .accessibilityText(雄性) // 屏幕朗读时读出雄性而非♂9.2 无障碍对比标签内容无障碍标签说明♂雄性符号需要文字说明♀雌性符号需要文字说明正常状态正常明确上下文还有15天距离驱虫还有15天完整描述十、标签设计最佳实践10.1 设计原则有序列表 — 标签设计的 5 个原则颜色语义化标签颜色应与状态含义一致绿正常红异常字号适中标签通常使用 11-13fp比其他文字小内边距充足左右内边距至少 6-8vp避免文字贴边圆角柔和使用 8-16vp 圆角标签更柔和背景配文字背景色应该比文字色更浅同色系搭配10.2 萌宠日记标签使用总结标签类型使用场景颜色方案位置性别标签宠物名称旁蓝/粉 浅色背景名称右侧状态标签健康记录列表绿/红/橙 浅色背景列表项右侧分类标签热门话题橙色 浅色背景话题区域筛选标签提醒事项橙色高亮 灰色未选中列表顶部筛选标签健康分类图标 文字记录页顶部总结本文从萌宠日记的性别标签和状态徽章实现出发深入解析了标签组件设计的完整方法性别标签♂/♀ 符号 蓝/粉配色 内联样式颜色语义不同状态对应不同颜色遵循通用认知标签封装通用 Tag 组件的参数化设计状态管理选中态、动态状态切换交互设计可点击标签、触摸反馈无障碍适配accessibilityText 添加文字说明最佳实践颜色语义化、字号适中、内边距充足标签和徽章虽小但在信息层级和状态标识中起着重要作用设计得当能显著提升用户体验。下一篇我们将深入快捷操作图标网格布局解析首页快捷操作栏的布局与交互实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Text 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textRow 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row颜色使用规范https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/color-usagePadding 属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sizeborderRadius 属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-border无障碍开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit组件封装最佳实践https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-components交互反馈设计https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/interaction-feedback
HarmonyOS应用开发实战：萌宠日记 - 性别标签与状态徽章组件
发布时间：2026/7/22 10:54:38
HarmonyOS应用开发实战萌宠日记 - 性别标签与状态徽章组件前言标签和徽章是 UI 设计中用于标识状态和分类信息的轻量级组件。在萌宠日记中我们使用性别标签标识宠物性别♂/♀使用状态徽章标识健康状态正常/异常这些小巧的组件在信息展示中起到了画龙点睛的作用。本文将从萌宠日记的性别标签实现出发深入解析标签组件的内联样式设计、状态徽章的颜色语义、以及标签组件的封装复用。一、性别标签实现1.1 核心代码// HomePage.ets — 性别标签 Text(♂) .fontSize(12) .fontColor(#42A5F5) .backgroundColor(#E3F2FD) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8)1.2 标签样式分解样式属性值作用fontSize12小字号不占用太多空间fontColor#42A5F5蓝色文字代表雄性backgroundColor#E3F2FD浅蓝色背景与文字色同色系padding{ left: 6, right: 6, top: 2, bottom: 2 }内边距避免文字贴近边框borderRadius8圆角使标签更柔和提示性别标签使用内联样式直接写在 Text 组件上没有封装为独立的组件。这是因为标签样式简单、使用场景固定内联方式更直接高效。二、性别标签的语义化设计2.1 颜色语义萌宠日记中性别标签的颜色选择遵循通用认知性别符号文字色背景色寓意雄性♂#42A5F5蓝色#E3F2FD浅蓝蓝色代表男性雌性♀#EC407A粉色#FCE4EC浅粉粉色代表女性2.2 性别标签的扩展// 根据性别动态渲染标签 Component export struct GenderTag { Prop gender: string male build() { if (this.gender male) { Text(♂) .fontSize(12) .fontColor(#42A5F5) .backgroundColor(#E3F2FD) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) } else { Text(♀) .fontSize(12) .fontColor(#EC407A) .backgroundColor(#FCE4EC) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) } } }三、标签的布局与对齐3.1 标签在 Row 中的位置Row({ space: 8 }) { Text(豆豆) .fontSize(20) .fontWeight(FontWeight.Bold) Text(♂) // 性别标签紧跟在名称后面 .fontSize(12) .fontColor(#42A5F5) .backgroundColor(#E3F2FD) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) }3.2 标签与文字的垂直对齐Text 组件的默认垂直对齐方式是基线对齐因此小字号的性别标签会自动与大字号的名称底部对齐看起来自然协调。四、状态徽章设计4.1 健康状态徽章// HealthRecordPage.ets — 健康状态徽章 Text(record.status) // 正常 或 异常 .fontSize(12) .fontColor(record.statusColor) // #4CAF50 绿色 .backgroundColor(#E8F5E9) // 浅绿色背景 .padding({ left: 8, right: 8, top: 2, bottom: 2 }) .borderRadius(8)4.2 状态颜色对照表状态文字色背景色语义正常#4CAF50绿色#E8F5E9浅绿健康、安全异常#F44336红色#FFEBEE浅红警告、问题待处理#FF9800橙色#FFF3E0浅橙提醒、注意已完成#42A5F5蓝色#E3F2FD浅蓝完成、已处理五、标签的状态管理5.1 动态状态// 状态标签数据 interface WeightRecord { date: string weight: string status: string // 正常 或 异常 statusColor: string // 对应的颜色 } // 渲染状态标签 ForEach(this.weightRecords, (record: WeightRecord) { Text(record.status) .fontSize(12) .fontColor(record.statusColor) .backgroundColor(this.getStatusBgColor(record.statusColor)) .padding({ left: 8, right: 8, top: 2, bottom: 2 }) .borderRadius(8) }) // 根据状态颜色获取背景色 getStatusBgColor(textColor: string): string { const colorMap: Recordstring, string { #4CAF50: #E8F5E9, // 绿色 → 浅绿背景 #F44336: #FFEBEE, // 红色 → 浅红背景 #FF9800: #FFF3E0, // 橙色 → 浅橙背景 #42A5F5: #E3F2FD, // 蓝色 → 浅蓝背景 } return colorMap[textColor] || #F5F5F5 }六、标签的封装复用6.1 通用标签组件// 通用标签组件 Component export struct Tag { Prop text: string Prop textColor: string #666666 Prop bgColor: string #F5F5F5 Prop fontSize: number 12 Prop paddingValue: number 8 build() { Text(this.text) .fontSize(this.fontSize) .fontColor(this.textColor) .backgroundColor(this.bgColor) .padding({ left: this.paddingValue, right: this.paddingValue, top: 2, bottom: 2 }) .borderRadius(8) } } // 使用示例 Tag({ text: ♂, textColor: #42A5F5, bgColor: #E3F2FD }) Tag({ text: 正常, textColor: #4CAF50, bgColor: #E8F5E9 })6.2 标签组件参数参数类型默认值说明textstring标签文字textColorstring#666666文字颜色bgColorstring#F5F5F5背景颜色fontSizenumber12字号paddingValuenumber8左右内边距七、标签在 ForEach 中的渲染7.1 列表中的标签// ReminderPage.ets — 提醒列表中的标签 ForEach(this.reminders, (item: ReminderItem) { ListItem() { Row({ space: 12 }) { // 图标 Column() { Text(item.icon).fontSize(24) } .width(44).height(44) .backgroundColor(item.iconBg) .borderRadius(12) // 标题和日期 Column({ space: 4 }) { Text(item.title).fontSize(15).fontWeight(FontWeight.Medium) Text(${item.date} (${item.daysLeft})).fontSize(12).fontColor(#999999) } Blank() Text(›).fontSize(18).fontColor(#CCCCCC) } .width(100%).padding(16) .backgroundColor(#FFFFFF).borderRadius(12) } })7.2 标签的选中态// 分类标签的选中态切换 State selectedCategory: number 0 ForEach(this.categories, (category: HealthCategory, index: number) { Column({ space: 4 }) { Column() { Text(category.icon).fontSize(22) } .width(44).height(44) .backgroundColor(category.color) .borderRadius(12) Text(category.label) .fontSize(11) .fontColor(this.selectedCategory index ? #F5A623 : #666666) } .onClick(() { this.selectedCategory index // 更新选中态 }) })八、标签组件的交互8.1 可点击标签// 可点击的标签如热门话题标签 Text(topic.label) .fontSize(13) .fontColor(#F5A623) .padding({ left: 12, right: 12, top: 8, bottom: 8 }) .backgroundColor(topic.color) .borderRadius(16) .onClick(() { console.log(Topic clicked:, topic.label) // 跳转到话题详情页 })8.2 标签的触摸反馈// 点击标签时添加视觉反馈 Text(topic.label) .fontSize(13) .fontColor(#F5A623) .padding({ left: 12, right: 12, top: 8, bottom: 8 }) .backgroundColor(topic.color) .borderRadius(16) .hitTestBehavior(HitTestMode.Block) // 确保点击事件正确响应 .onClick(() { // 点击处理 })九、标签组件的无障碍9.1 无障碍标签// 为标签添加无障碍描述 Text(♂) .fontSize(12) .fontColor(#42A5F5) .backgroundColor(#E3F2FD) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) .accessibilityText(雄性) // 屏幕朗读时读出雄性而非♂9.2 无障碍对比标签内容无障碍标签说明♂雄性符号需要文字说明♀雌性符号需要文字说明正常状态正常明确上下文还有15天距离驱虫还有15天完整描述十、标签设计最佳实践10.1 设计原则有序列表 — 标签设计的 5 个原则颜色语义化标签颜色应与状态含义一致绿正常红异常字号适中标签通常使用 11-13fp比其他文字小内边距充足左右内边距至少 6-8vp避免文字贴边圆角柔和使用 8-16vp 圆角标签更柔和背景配文字背景色应该比文字色更浅同色系搭配10.2 萌宠日记标签使用总结标签类型使用场景颜色方案位置性别标签宠物名称旁蓝/粉 浅色背景名称右侧状态标签健康记录列表绿/红/橙 浅色背景列表项右侧分类标签热门话题橙色 浅色背景话题区域筛选标签提醒事项橙色高亮 灰色未选中列表顶部筛选标签健康分类图标 文字记录页顶部总结本文从萌宠日记的性别标签和状态徽章实现出发深入解析了标签组件设计的完整方法性别标签♂/♀ 符号 蓝/粉配色 内联样式颜色语义不同状态对应不同颜色遵循通用认知标签封装通用 Tag 组件的参数化设计状态管理选中态、动态状态切换交互设计可点击标签、触摸反馈无障碍适配accessibilityText 添加文字说明最佳实践颜色语义化、字号适中、内边距充足标签和徽章虽小但在信息层级和状态标识中起着重要作用设计得当能显著提升用户体验。下一篇我们将深入快捷操作图标网格布局解析首页快捷操作栏的布局与交互实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Text 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textRow 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row颜色使用规范https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/color-usagePadding 属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sizeborderRadius 属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-border无障碍开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit组件封装最佳实践https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-components交互反馈设计https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/interaction-feedback
