DiaryDetail2Page 卡片式详情：琥珀渐变 + 引号装饰

前言“海风日记“提供了两种日记详情页样式DiaryDetailPage的纸张风格和DiaryDetail2Page的卡片风格。本文介绍第二种风格——卡片式详情页以琥珀渐变卡片展示日期配以白色正文卡片整体风格更现代、更精致。一、卡片式详情布局1.1 整体结构Column() { // 顶部导航栏 Row() { ... } Scroll() { Column({ space: 16 }) { // 顶部日期卡片琥珀渐变 Stack({ alignContent: Alignment.BottomEnd }) { Column() .width(100%).height(180) .borderRadius(CARD_RADIUS) .linearGradient({ angle: 135, colors: [[COLOR_HEADER_TOP, 0.0], [#FFCC70, 0.6], [#F5A623, 1.0]] }) .shadow({ radius: 20, color: rgba(245,166,35,0.30), offsetY: 6 }) Text().fontSize(120).fontColor(rgba(255,255,255,0.12)) .position({ x: 8, y: -20 }) // 日期内容 Column({ space: 12 }) { Row({ space: 12 }) { Text(this.diary.dayNum.toString()) .fontSize(72).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) Column({ space: 6 }) { Text(weekday).fontSize(14).fontColor(rgba(255,255,255,0.90)) Text(yearMonth).fontSize(12).fontColor(rgba(255,255,255,0.75)) Row({ space: 8 }) { Text(getWeatherEmoji(this.diary.weather)).fontSize(16) Text(getMoodEmoji(this.diary.mood)).fontSize(16) } } } } } // 标签行 if (this.diary.tags.length 0) { ... } // 正文卡片 Column({ space: 16 }) { Text(this.diary.content) .fontSize(16).fontColor(COLOR_TEXT_MAIN).lineHeight(30) } .padding(PAGE_PADDING) .backgroundColor(COLOR_CARD_BG) .borderRadius(CARD_RADIUS) .shadow({ radius: 12, color: rgba(160,120,60,0.08), offsetY: 2 }) // 底部签名 Column() { Divider() Row() { Text(— 海风日记).fontSize(12).fontColor(COLOR_AMBER) Text(this.diary.date).fontSize(11).fontColor(COLOR_TEXT_HINT) } } } } }二、两种详情页的对比对比维度DiaryDetailPageDiaryDetail2Page头部风格暖橙渐变琥珀渐变日期展示80vp 大数字72vp 白色数字正文背景象牙色纸张白色卡片装饰元素波浪分隔引号装饰卡片效果无圆角 阴影三、引号装饰Text() .fontSize(120) .fontColor(rgba(255,255,255,0.12)) .fontWeight(FontWeight.Bold) .position({ x: 8, y: -20 })四、shadow 阴影体系// 顶部卡片阴影 .shadow({ radius: 20, color: rgba(245,166,35,0.30), offsetY: 6 }) // 正文卡片阴影 .shadow({ radius: 12, color: rgba(160,120,60,0.08), offsetY: 2 })五、总结本文通过 DiaryDetail2Page深入讲解了卡片式详情页的设计琥珀渐变卡片品牌色渐变引号装饰120vp 超大引号白色正文卡片圆角 阴影两种风格对比纸张 vs 卡片下一篇文章将深入讲解shadow 阴影体系敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源LinearGradient 文档Shadow 属性文档Stack 容器文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区