HarmonyOS7多主题徽章颜色页实战：Badge 颜色主题系统与语义区分

yangcy9

96人浏览 · 2026-07-21 09:43:24

yangcy9 · 2026-07-21 09:43:24 发布

文章目录

前言

颜色不是装饰，它其实在传达语义。红色像告警，绿色像正常，橙色像提醒。这个案例把 Badge 的颜色变化放到一页里，很适合理解“视觉语言”这件事。有些案例看完只会得到一个 demo 效果，有些案例看完会顺手带走一套页面组织方法。我的目标是把它往后者那边讲。

别看这个案例篇幅不算长，但它很适合拿来练“页面目标和代码结构怎么对齐”这件事。你后面不管是复刻，还是准备拆成自己的业务组件，都会更顺。

这类写法尤其适合落在状态管理页、设计系统、风格演示页这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

A hand-drawn doodle illustration on pure white pap

如果准备复刻，先盯住这几块

很多人学示例会直接复制 UI 代码，结果复刻出来是像的，但后面一改就散。原因通常不是代码抄错了，而是结构关系没先看懂。

页面区域	主要职责	在代码里的典型表现
头部说明区	交代当前案例在演示什么	`Text` 标题、补充说明、标签文案
核心展示区	承载组件能力的主要效果	`Column`、`Row`、业务组件本体
辅助信息区	补充状态、标签、分组或统计信息	次级文本、角标、分组标题、描述块
交互入口区	负责切换、返回、定位、选择等动作	点击事件、按钮、索引条、导航入口

页面里额外定义的数据模型包括：Item。如果后面准备接接口，我更建议把这些类型继续收口成更直白的业务命名。

这类页面最容易被忽略的往往不是功能，而是手感、反馈和节奏，我会把这些细点单独挑出来说。

A hand-drawn doodle illustration on pure white pap

颜色主题的重点，是别让用户猜含义

这页的 isShow 不重要，真正要看的还是 label、color、count 这组三元配置。它把“显示什么状态、用什么颜色、提醒强度是多少”放在同一条数据里，读起来就很接近真实设计系统。

我会把这几个颜色当成语义来理解：

红色紧急：适合故障、风险、强提醒，不建议滥用。
绿色完成：适合成功、已处理、正常状态。
橙色待办：适合需要关注但还没到告警级别的任务。
蓝色通知：适合普通消息、信息流提醒和系统告知。

如果一个项目里 Badge 颜色没有统一语义，后面一定会越来越乱。这个案例最值得带走的，就是先把颜色规则数据化。

这一页的控制权主要在这里

示例代码里最怕被忽略的，就是那些看起来普通、实际上掌控页面节奏的方法。这里建议优先把它们摸清。

Badge：读它时重点看输入、改动对象，以及它最终影响了页面哪一块。

我自己读这类方法时，通常只抓一条线：谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来，很多交互代码一下就顺了。

A hand-drawn doodle illustration on pure white pap

第一段关键代码：页面是怎么被带起来的

这一段建议慢一点看。它通常决定了页面初始状态，也决定了后续哪些区域会跟着刷新。

@State isShow: boolean = true

  build() {
    Column() {
      if (this.isShow) {
        Column() {
          Text('Badge 自定义颜色主题')
            .fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FF6B6B').margin({ bottom: 4 })
          Text('不同场景使用不同颜色：红=重要、绿=完成、黄=待处理、蓝=信息')
            .fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({ bottom: 12 })
        }
        .width('100%').alignItems(HorizontalAlign.Start)

        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround }) {
          ForEach([
            { label: '紧急', color: '#FA2A2D', count: 5 },
            { label: '完成', color: '#6BCB77', count: 12 },
            { label: '待办', color: '#FFA500', count: 8 },
            { label: '通知', color: '#4D96FF', count: 3 }
          ], (item: BadgeColorThemeSystemItem) => {
            Badge({
              count: item.count,
              position: BadgePosition.RightTop,
              style: { badgeSize: 18, badgeColor: item.color, fontSize: 10 }

这一段我通常不会一下翻过去，而是先确认下面这几个判断点：

@State 字段到底在控制显示、选择、跳转结果还是模式切换。
默认值是不是合理，页面一打开会不会就落在一个可理解的状态上。
字段命名能不能让后来的人一眼看懂用途，而不是还要翻半天 UI。

第二段关键代码：真正决定交互手感的地方

这段代码适合按“语义配置”来读。item.label 说明状态含义，item.color 决定视觉语言，item.count 补充提醒强度，三者合在一起才是一条完整的徽章规则。

Badge({
              count: item.count,
              position: BadgePosition.RightTop,
              style: { badgeSize: 18, badgeColor: item.color, fontSize: 10 }
            }) {
              Column() {
                Text('📋').fontSize(32)
                Text(item.label as string).fontSize(12).fontColor('#666').margin({ top: 6 })
              }
              .width(80).height(80)
              .backgroundColor(DEMO_CARD_COLOR)
              .borderRadius(14)
              .justifyContent(FlexAlign.Center)
              .border({ width: 1, color: '#F0F0F0' })
            }
          })
        }.width('100%')
        .backgroundColor(DEMO_CARD_COLOR).borderRadius(12).padding(12)

        Text('💡 通过 badgeColor 可自定义任意颜色，匹配不同业务场景').fontSize(11).fontColor('#999').margin({ top: 12, left: 4 })
      }
      Text('多主题徽章颜色页 - Badge 自定义颜色：红/绿/橙/蓝 场景化配色')
        .fontSize(12).fontColor('#999999').margin({ top: 12 })
    }

代码读到这里，我通常会顺手补三件事，不然后面很容易只看热闹：

这个交互入口接收的到底是什么输入。
输入进来之后，代码改了哪个状态，或者触发了哪次导航。
变化发生后，用户最先感知到的反馈会落在哪个区域。

这三个问题串起来之后，这一页基本就不只是“看过”，而是真的读懂了。

第一次跑这个案例，我会怎么试

第一次接触这个案例时，不要急着扩展功能。先把默认状态和一次完整交互跑顺，后面加东西才不会歪。

先进入页面，确认首屏是不是把 多主题徽章颜色页 的主题交代清楚。
盯住核心展示区，观察默认状态下最醒目的内容是什么。
主动触发一次关键交互，比如点击、滑动、跳转、返回、切换或者选择。
回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。
最后再打开源码，对照刚才那次交互，把状态变化链路串起来。

如果这五步你能边操作边说清楚页面发生了什么，后面再换成自己的数据和交互，心里会稳很多。

这一页真正落地时，建议额外处理什么

我自己迁示例代码时，最怕的是把展示逻辑和业务逻辑粘成一团。这个案例里有些地方可以提前规避。

徽章进入真实项目后，先统一语义：到底是在表达提醒、数量还是状态，再决定颜色和样式。
Badge 很容易写散，建议尽早抽一层可复用封装，把颜色、位置和上限逻辑一起收进去。
只要页面里有重复块，就别硬撑着手写到底；早点抽成小组件，后面改样式和改交互都会轻松很多。
示例数据最好和布局代码分开放，不然后面一接接口，页面文件很容易立刻变臃肿。

把它吃透之后，后面会省很多时间

我会把这类案例当成“工程感比炫技感更强”的材料来留存。后面真的要做同类页面时，能少走不少弯路。

页面结构比较稳，后续不管是换数据还是换皮肤，成本都不会特别高。
状态数量总体可控，适合拿来练“一个页面里如何分配职责”这件事。
组件参数和页面目标之间关系比较直观，不太会出现“能跑但看不懂为什么这么配”的情况。

完整代码

下面保留整理过命名的完整 ArkTS 代码，方便你直接对照学习。这里已经去掉原始的 Demo 命名，改成了更贴近当前案例语义的名称。

/**
 * 多主题徽章颜色页
 */
import { PRESET_COLORS, DEMO_BG_COLOR, DEMO_CARD_COLOR, DEMO_THEME_COLOR, DEMO_SUBTEXT_COLOR } from './types'


interface BadgeColorThemeSystemItem {
  label: string
  color: string
  count: number
}
@Entry
@Component
struct BadgeColorThemeSystem {
  @State isShow: boolean = true

  build() {
    Column() {
      if (this.isShow) {
        Column() {
          Text('Badge 自定义颜色主题')
            .fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FF6B6B').margin({ bottom: 4 })
          Text('不同场景使用不同颜色：红=重要、绿=完成、黄=待处理、蓝=信息')
            .fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({ bottom: 12 })
        }
        .width('100%').alignItems(HorizontalAlign.Start)

        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround }) {
          ForEach([
            { label: '紧急', color: '#FA2A2D', count: 5 },
            { label: '完成', color: '#6BCB77', count: 12 },
            { label: '待办', color: '#FFA500', count: 8 },
            { label: '通知', color: '#4D96FF', count: 3 }
          ], (item: BadgeColorThemeSystemItem) => {
            Badge({
              count: item.count,
              position: BadgePosition.RightTop,
              style: { badgeSize: 18, badgeColor: item.color, fontSize: 10 }
            }) {
              Column() {
                Text('📋').fontSize(32)
                Text(item.label as string).fontSize(12).fontColor('#666').margin({ top: 6 })
              }
              .width(80).height(80)
              .backgroundColor(DEMO_CARD_COLOR)
              .borderRadius(14)
              .justifyContent(FlexAlign.Center)
              .border({ width: 1, color: '#F0F0F0' })
            }
          })
        }.width('100%')
        .backgroundColor(DEMO_CARD_COLOR).borderRadius(12).padding(12)

        Text('💡 通过 badgeColor 可自定义任意颜色，匹配不同业务场景').fontSize(11).fontColor('#999').margin({ top: 12, left: 4 })
      }
      Text('多主题徽章颜色页 - Badge 自定义颜色：红/绿/橙/蓝 场景化配色')
        .fontSize(12).fontColor('#999999').margin({ top: 12 })
    }
    .width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)
  }
}

收个尾

真放到日常开发里，最有参考价值的往往不是花样最多的页面，而是这种把关键决定摆得很清楚的案例。多主题徽章颜色页就属于这一类。

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

鸿蒙获取定义构建参数（二）

本文通过示例演示了如何在HarmonyOS工程中配置和使用构建参数。主要内容包括：1) 在工程级build-profile.json5中为不同product配置productMessage参数；2) 在HAR模块级配置targetMessage1/2参数；3) 实现HAR模块通过BuildProfile获取参数值并在界面展示；4) 展示HAP模块如何引用HAR模块及其组件。通过切换product和