行业资讯
天气药丸标签：Row + Text 组合实现品牌药丸
前言药丸标签Pill Badge是移动应用中常见的 UI 元素用于展示状态或分类信息。“海风日记“在首页的日期行中使用了天气药丸标签展示当前天气状况和 emoji通过 Row Text 组合实现。本文将从源码出发深入讲解药丸标签的设计和实现以及如何通过 border、backgroundColor 和 borderRadius 的组合实现品牌药丸样式。一、天气药丸的实现1.1 源码Row({ space: 3 }) { Text(☀️).fontSize(12) // 天气 emoji Text(晴天).fontSize(12).fontColor(#C8800A) // 天气文字 .fontWeight(FontWeight.Medium) } .backgroundColor(rgba(245,166,35,0.12)) // 浅橙色背景 .border({ width: 1, color: rgba(245,166,35,0.22) }) // 橙色边框 .borderRadius(10) // 圆角 .padding({ left: 8, right: 8, top: 2, bottom: 2 }) // 紧凑内边距1.2 视觉样式分析属性值效果backgroundColorrgba(245,166,35,0.12)12% 透明度橙色背景border.width1细边框border.colorrgba(245,166,35,0.22)22% 透明度橙色边框borderRadius10药丸圆角padding8/8/2/2水平宽、垂直窄二、药丸标签的通用设计2.1 标签样式模板// 通用药丸标签构建器 Builder pillTag(emoji: string, text: string, color: string) { Row({ space: 3 }) { Text(emoji).fontSize(12) Text(text).fontSize(12).fontColor(color).fontWeight(FontWeight.Medium) } .backgroundColor(${color}1A) // 约 10% 透明度 .border({ width: 1, color: ${color}33 }) // 约 20% 透明度 .borderRadius(10) .padding({ left: 8, right: 8, top: 2, bottom: 2 }) }2.2 不同颜色标签// 橙色标签天气 this.pillTag(☀️, 晴天, #C8800A) // 蓝色标签心情 this.pillTag(, 开心, #5A9EFF) // 绿色标签状态 this.pillTag(✅, 完成, #4CAF50)三、标签在项目中的使用3.1 日记详情标签Text(# ${tag}) .fontSize(12).fontColor(COLOR_AMBER) .backgroundColor(rgba(245,166,35,0.08)) .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .borderRadius(8)3.2 日历节假日标签Text(国庆假期) .fontSize(11).fontColor(COLOR_PRIMARY).fontWeight(FontWeight.Bold) .backgroundColor(rgba(245,166,35,0.15)) .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .borderRadius(8) .border({ width: 1, color: rgba(245,166,35,0.25) })四、常见问题与排查4.1 标签文字颜色不清晰问题标签文字颜色与背景对比度不足。解决方案使用fontWeight(FontWeight.Medium)或FontWeight.Bold增加文字厚度。4.2 标签大小不一致问题不同位置的标签大小不一致。解决方案统一使用padding和fontSize控制标签尺寸。总结本文通过“海风日记“的天气药丸标签深入讲解了药丸标签的实现Row Text 组合emoji 和文字的水平排列透明度颜色backgroundColor 和 border 的透明度控制通用模板可复用的药丸标签构建器多场景应用天气、标签、节假日等不同场景至此第三系列“首页与日记卡片“全部完成从下一篇文章开始进入第四系列写日记与编辑。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Row 组件文档Text 组件文档Border 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
郑州网站建设
网页设计
企业官网
