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

前言

"海风日记"提供了两种日记详情页样式：DiaryDetailPage 的纸张风格，和 DiaryDetail2Page 的卡片风格。本文介绍第二种风格------卡片式详情页，以琥珀渐变卡片展示日期，配以白色正文卡片，整体风格更现代、更精致。

一、卡片式详情布局

1.1 整体结构

typescript 复制代码

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)
        }
      }
    }
  }
}

二、两种详情页的对比

对比维度	DiaryDetailPage	DiaryDetail2Page
头部风格	暖橙渐变	琥珀渐变
日期展示	80vp 大数字	72vp 白色数字
正文背景	象牙色纸张	白色卡片
装饰元素	波浪分隔	引号装饰
卡片效果	无	圆角 + 阴影

三、引号装饰

typescript 复制代码

Text('"')
  .fontSize(120)
  .fontColor('rgba(255,255,255,0.12)')
  .fontWeight(FontWeight.Bold)
  .position({ x: 8, y: -20 })

四、shadow 阴影体系

typescript 复制代码

// 顶部卡片阴影
.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
开源鸿蒙跨平台社区