鸿蒙原生应用 ArkUI 实战：紫色渐变汇总卡 + 四色品牌列表 —— 订阅管理首页的支出总览架构

App 54「订阅服务管理」首页（HomeTab），主题色 #9B51E0 梦幻紫，4 个 Tab 分别为首页（📺）、订阅（📋）、日历（📅）、统计（📊）。本篇基于 54-sub-mgr/entry/src/main/ets/pages/HomeTab.ets（共 102 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"Header + 汇总卡 + 列表"布局

首页是"品牌头部 + 支出汇总 + 订阅列表"的三区布局——3 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.OverviewCard()
        this.SectionTitle('我的订阅')
        this.SubList()
      }
      .width('100%')
      .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad + this.safeBottom + 20 })
    }
    .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
  }
  .width('100%').height('100%').backgroundColor(C.bg)
}

3 块结构：Header（单行品牌头）→ OverviewCard（紫色渐变支出汇总卡）→ SubList（4 条四色订阅卡片）。首页是"订阅总览页"——先亮出本月订阅支出（53.30 元）、订阅项数（4 项）、年度支出（640 元）三大核心数据，再列出 4 条订阅明细。相比 App 52 票据（财务管理）、App 53 保修（时间管理），本页是"订阅支出管理"——核心关注"每月固定扣款的总和"。

二、Header：单行品牌头

Header() {
  Column() {
    Text('订阅管理').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text)
      .width('100%').padding({ top: this.safeTop + 10, left: D.pad, right: D.pad, bottom: 12 })
  }.width('100%').backgroundColor(C.card)
}

22 号加粗、safeTop + 10 避让状态栏、白底全宽。与系列工具型首页（App 45/App 47/App 52/App 53）同款单行标题范式。

三、OverviewCard：紫色渐变支出汇总卡

OverviewCard() {
  Column({ space: 16 }) {
    Column({ space: 6 }) {
      Text('本月订阅支出（元）').fontSize(13).fontColor('#FFFFFF').opacity(0.9)
      Text('53.30').fontSize(32).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
    }.alignItems(HorizontalAlign.Start).width('100%')
    Row() {
      Column({ space: 4 }) {
        Text('订阅服务').fontSize(12).fontColor('#FFFFFF').opacity(0.9)
        Text('4 项').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      }.alignItems(HorizontalAlign.Start).layoutWeight(1)
      Column({ space: 4 }) {
        Text('年度支出').fontSize(12).fontColor('#FFFFFF').opacity(0.9)
        Text('¥640').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      }.alignItems(HorizontalAlign.Start).layoutWeight(1)
    }.width('100%')
  }
  .width('100%').padding(20).borderRadius(D.rLg)
  .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })
}

逐点拆解：

1. 紫色渐变：linearGradient 从 #9B51E0 梦幻紫渐变到 #BC85E8 亮紫——紫色传达"创意/数字服务"气质（视频、音乐、云服务都是数字产品），与 App 42 树洞、App 48 班级任务同色系。
2. 主金额 32 号加粗："53.30" 是全卡最大字号——月度订阅支出是首页最核心的数字（用户打开 App 第一眼要看"每个月固定扣多少钱"）。
3. 两列副统计：layoutWeight(1) 均分——订阅服务 4 项（数量）+ 年度支出 ¥640（金额），"当月"与"全年"两个时间尺度对照。
4. 数据自洽：年度 640 = 25×12 + 15×12 + 6×12 + 88 = 300+180+72+88 = 640；月度 53.30 ≈ 25+15+6+88÷12 = 53.33——汇总 = 明细之和。

四、Sub 数据模型 + SectionTitle

interface Sub {
  id: number;
  emoji: string;
  name: string;
  price: number;
  cycle: string;
  color: string;
}

private subs: Sub[] = [
  { id: 1, emoji: '🎬', name: '视频会员', price: 25, cycle: '月付', color: '#E63946' },
  { id: 2, emoji: '🎵', name: '音乐会员', price: 15, cycle: '月付', color: '#1DB954' },
  { id: 3, emoji: '☁️', name: '云存储服务', price: 6, cycle: '月付', color: '#4A90D9' },
  { id: 4, emoji: '💻', name: '软件订阅', price: 88, cycle: '年付', color: '#9B51E0' }
];

Sub 六字段：emoji（服务图标）、name（名称）、price（金额）、cycle（周期）、color（品牌色）。4 项订阅各带品牌色——视频红 #E63946、音乐绿 #1DB954、云存储蓝 #4A90D9、软件紫 #9B51E0——颜色编码借力品牌直觉（用户对 Netflix 红、Spotify 绿的认知天然存在）。

SectionTitle(title: string) {
  Row() {
    Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text)
    Blank()
    Text('管理 >').fontSize(12).fontColor(C.textDim)
  }.width('100%')
}

Blank() 撑开中间空间——左侧标题 + 右侧"管理 >"入口，与 App 52/53 同款弹性占位范式。

五、SubList：四色品牌订阅卡片列表

SubList() {
  Column({ space: 10 }) {
    ForEach(this.subs, (s: Sub) => {
      Row({ space: 12 }) {
        Row() { Text(s.emoji).fontSize(24) }
        .width(48).height(48).backgroundColor(s.color + '22').borderRadius(D.rSm).justifyContent(FlexAlign.Center)
        Column({ space: 3 }) {
          Text(s.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text)
          Text(s.cycle).fontSize(12).fontColor(C.textDim)
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        Text('¥' + s.price).fontSize(15).fontWeight(FontWeight.Bold).fontColor(s.color)
      }
      .width('100%').padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
      .onClick(() => { promptAction.showToast({ message: s.name }); })
    }, (s: Sub) => s.id.toString())
  }.width('100%')
}

逐点拆解：

1. 48×48 彩色软底图标块：backgroundColor(s.color + '22')——品牌色 + '22'（13% 透明度）拼接 8 位色值，emoji 24 号居中。每项订阅有自己的品牌色（视频红/音乐绿/云存储蓝/软件紫），颜色编码让订阅一眼可辨。
2. 名称 + 周期：14 号 Medium 名称 + 12 号淡灰周期（月付/年付）——layoutWeight(1) 撑开中间区。
3. 彩色金额：15 号 Bold ¥25 用订阅的品牌色——金额颜色 = 品牌颜色，强化订阅与品牌的关联，与 App 52 分类页的"分类色金额"同手法。
4. 年付/月付差异：前三项月付（25/15/6）、软件年付（88）——年付单价高但全年省（88 元年付 vs 月付平均 7.33 元/月），"年付/月付"的取舍是订阅管理的核心场景。
5. 整卡点击：onClick 弹 Toast 订阅名——产品化后跳订阅详情页。

六、数据自洽：汇总 = 明细之和

      Text('53.30').fontSize(32).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')

  { id: 1, emoji: '🎬', name: '视频会员', price: 25, cycle: '月付', color: '#E63946' },
  { id: 2, emoji: '🎵', name: '音乐会员', price: 15, cycle: '月付', color: '#1DB954' },
  { id: 3, emoji: '☁️', name: '云存储服务', price: 6, cycle: '月付', color: '#4A90D9' },
  { id: 4, emoji: '💻', name: '软件订阅', price: 88, cycle: '年付', color: '#9B51E0' }

月度 53.30 ≈ 25+15+6+88÷12 = 53.33（年付折算到月）；年度 640 = 25×12+15×12+6×12+88 = 640——汇总 = 明细之和，演示数据自洽。年度 640 与统计页"¥640 本年度订阅总支出"完全一致，四页同源。

七、梦幻紫主题的视觉策略

export class C {
  static readonly bg: string = '#F2F5FB';
  static readonly card: string = '#FFFFFF';
  static readonly cardSoft: string = '#F4F6FB';
  static readonly stroke: string = '#EAEEF6';
  static readonly text: string = '#1C2333';
  static readonly textSub: string = '#5A6483';
  static readonly textDim: string = '#9AA3BC';
  static readonly primary: string = '#9B51E0';
  static readonly primarySoft: string = '#F0E7FB';
  static readonly accent: string = '#BC85E8';
  static readonly warn: string = '#FF9F1C';
  static readonly danger: string = '#FF5A6E';
  static readonly ok: string = '#2BB673';
}

逐点拆解：

1. primary = #9B51E0：梦幻紫传达"创意/数字服务"气质——与 App 42 树洞（#A29BFE 淡紫）、App 48 班级任务（#6C5CE7 深紫）同色系但更均衡。
2. accent = #BC85E8：亮紫渐变终点——紫系渐变是"数字订阅"的视觉标识。
3. 品牌色 vs 主题色：汇总卡用主题紫渐变（品牌区），订阅列表用各项品牌色（内容区）——主题色管"页面的脸"、品牌色管"内容的识"，两套色系各有分工。

八、系列横向对比：紫系工具首页与汇总卡列表三剑客

工具首页	代表 App	首页焦点	列表特色	主题色
订阅支出	App 54 订阅	渐变汇总卡 + 四色列表	品牌色金额	#9B51E0 梦幻紫
金额汇总	App 52 票据	渐变汇总卡 + 票据列表	主色软底图标	#0066CC 科技蓝
时间告警	App 53 保修	三列汇总卡 + 三态列表	状态色胶囊	#00A862 生态绿

差异点：App 54 的"四色品牌列表"是系列中独树一帜的——每项订阅的颜色来自"服务品牌色"（视频红、音乐绿、云存储蓝、软件紫），与 App 52 的"分类色"（按消费类别）不同，54 的色源是"服务本身"，颜色编码借力品牌直觉，这是订阅场景独有的视觉设计。

九、开发者视角：调试与验证技巧

1. HEX 透明度拼接：s.color + '22' 是字符串拼接 8 位色值——透明度必须是两位十六进制（22 ≈ 13%），数据中的品牌色若来自接口需确认格式（无 # 前缀会失效）。
2. 月付与年付换算：汇总卡 53.30 元是"月均支出"——年付订阅（88 元）要折算到月（88÷12≈7.33），产品化应统一用"月均成本"口径计算。
3. 周期文案统一：首页显示"月付/年付"、订阅页显示"¥25/月"——两种周期表达，产品化应统一格式化函数（formatCycle('月付') 返回"月"）。
4. 金额着色可读性：浅色品牌色（如音乐绿 #1DB954）在白底上对比度尚可，但极浅色金额会难辨——产品化应给浅色品牌色加深一档，保证金额数字可读。

十、演进方向

方向	当前状态	产品化演进
月均动态化	硬编码 53.30	subs.reduce() 动态求和，年付折算到月
订阅详情	Toast"视频会员"	跳订阅详情页（续费/取消/扣款记录）
重复订阅检测	无	识别功能重叠的订阅，给出合并建议
使用频率追踪	无	记录使用次数，低频订阅建议取消
预算控制	无	设定月度预算上限，超预算预警

十一、一句话总结

首页以"紫色渐变汇总卡 + 四色品牌列表"完成了订阅支出的总览展示。linearGradient 梦幻紫渐变汇总卡（32 号月度金额 + 两列副统计）、48×48 品牌色软底图标块（s.color + '22' 透明度拼接）、品牌色金额强调（金额色 = 品牌色）、Blank() 弹性占位 SectionTitle——102 行代码，一个"看月付 → 查项数 → 对照年度"的订阅总览页，也是"品牌色编码"型首页的标准范式。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub