前言卡片组件是内容型应用中最常见的 UI 模式。“海风日记“的DiaryCard组件承载了日记的摘要展示功能包含情绪色条、置顶标识、时间戳、正文摘要、图片占位、标签和情绪 emoji 等丰富元素。本文将从DiaryCard.ets源码出发深入讲解卡片组件的设计思路、多态内容展示以及情绪色条映射机制。一、组件属性设计1.1 属性定义Component export struct DiaryCard { moodColor: MoodColor default // 情绪色类型 timeStr: string // 时间字符串 content: string // 正文摘要 tags: string[] [] // 标签数组 isPinned: boolean false // 是否置顶 hasImage: boolean false // 是否有图片 moodEmoji: string // 情绪 emoji onTap: () void () {} // 点击回调 }1.2 属性分类分类属性类型展示效果视觉moodColor颜色左侧情绪色条时间timeStr字符串时间戳内容content字符串正文摘要元数据tags,isPinned,hasImage布尔/数组标签、置顶、图片标识交互moodEmoji,onTap字符串/函数表情图标、点击响应二、情绪色条2.1 颜色映射function getMoodStripColor(mood: MoodColor): string { switch (mood) { case sunny: return COLOR_MOOD_SUNNY // 橙色 #F5A623 case calm: return COLOR_MOOD_CALM // 薄荷绿 #7ECAAE case ponder: return COLOR_MOOD_PONDER // 紫色 #A67EC0 case low: return COLOR_MOOD_SAD // 蓝色 #8BAFD6 default: return #E8D5B0 // 默认米色 } }2.2 色条实现Rect() .width(3.5) // 3.5vp 宽 .height(100%) // 与卡片等高 .fill(getMoodStripColor(this.moodColor)) .borderRadius({ topLeft: CARD_RADIUS, bottomLeft: CARD_RADIUS })2.3 情绪色与心情的对应心情MoodColor色值色条颜色开心/晴天sunny#F5A623橙色平静calm#7ECAAE薄荷绿感慨ponder#A67EC0紫色低落low#8BAFD6蓝色难过sad#B0A8C8淡紫三、置顶标识3.1 置顶条if (this.isPinned) { Row({ space: 4 }) { SymbolGlyph($r(sys.symbol.pin)) .fontSize(10).fontColor([COLOR_PRIMARY_DEEP]) Text(置顶).fontSize(10).fontColor(COLOR_PRIMARY_DEEP) .fontWeight(FontWeight.Bold) } .width(100%) .padding({ left: 18, top: 4, bottom: 4 }) .backgroundColor(rgba(245,166,35,0.06)) }3.2 置顶标识的视觉设计图标sys.symbol.pin图钉图标文字“置顶“标签颜色COLOR_PRIMARY_DEEP深橙色背景极淡橙色背景rgba(245,166,35,0.06)四、内容展示4.1 正文摘要Text(this.content) .fontSize(14.5).fontColor(COLOR_TEXT_MAIN) .lineHeight(25.4) .maxLines(5) // 最多显示 5 行 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出省略4.2 图片占位if (this.hasImage) { Row() { SymbolGlyph($r(sys.symbol.camera)) .fontSize(20).fontColor([#C8C0B0]) } .width(100%).height(86) .backgroundColor(#EDE0CC).borderRadius(9) .justifyContent(FlexAlign.Center) .margin({ bottom: 10 }) }4.3 标签和情绪Row() { if (this.tags.length 0) { Text(#${this.tags[0]}) // 只显示第一个标签 .fontSize(11).fontColor(COLOR_AMBER) .backgroundColor(rgba(245,166,35,0.08)) .padding({ left: 8, right: 8, top: 2, bottom: 2 }) .borderRadius(8) } Blank() if (this.moodEmoji.length 0) { Text(this.moodEmoji).fontSize(14) } }五、卡片布局5.1 完整布局Row() { // 左侧情绪色条 Rect() .width(3.5).height(100%) .fill(getMoodStripColor(this.moodColor)) // 卡片内容 Column() { // 置顶标识可选 if (this.isPinned) { ... } // 内容区 Column({ space: 6 }) { Text(this.timeStr) // 时间戳 Text(this.content) // 正文摘要 if (this.hasImage) { ... } // 图片占位 // 标签 情绪 Row() { ... } } } .layoutWeight(1) }5.2 卡片样式.width(100%) .backgroundColor(COLOR_CARD_BG) .borderRadius(CARD_RADIUS) .shadow({ radius: 12, color: rgba(160,120,60,0.10), offsetY: 2 }) .clip(true)六、组件的多态展示6.1 不同状态下的卡片状态置顶图片标签情绪普通无无有有置顶有无有有图文无有有有完整有有有有七、常见问题与排查7.1 卡片内容溢出问题正文内容超出卡片区域。解决方案使用maxLines和textOverflow控制文本溢出。7.2 情绪色条不显示问题左侧情绪色条没有显示。原因Rect 的height(100%)需要父容器有明确高度。解决方案确保 Row 有明确的高度约束。总结本文通过“海风日记“的 DiaryCard 组件深入讲解了卡片组件的设计属性设计情绪色、时间、内容、标签、交互情绪色条颜色映射和实现置顶标识图标 文字 背景色内容展示正文摘要、图片占位、标签多态展示不同状态下的卡片样式下一篇文章将深入讲解SymbolGlyph 与 FontColor 数组语法敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Text 组件文档Rect 组件文档SymbolGlyph 文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区