前言

静态徽章只是在展示信息，动态徽章才真正进入业务流程。数量会跟着点击、读取、清空、接收新消息而变化。这个案例很适合用来练状态联动。 我自己看这类案例时，通常不会先背属性，而是先判断它到底在解决什么页面问题。这个习惯很有用，因为一旦知道“它是给谁用、解决什么场景”，后面的代码就不容易看散。

如果把这页当成练习材料，我会优先看它怎样围绕 Badge 数量实时变化与交互联动 组织页面。因为这一层想清楚了，后面的代码基本就不会散。

这类写法尤其适合落在 消息系统、购物车、待办管理、实时通知页 这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

先把这页在干什么看明白

我建议先不要着急顺着源码往下滚。先回答一个更实际的问题：动态更新徽章页 这个页面，用户一进来第一眼会看到什么，接着又会去操作哪里。结构感一旦建立起来，后面的代码就不容易看散。

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

这一页没有额外拆出接口，页面更多是直接围绕基础数据和组件参数展开。

这篇我会按“先看到什么、再点什么、最后哪里变化”的顺序去讲，适合第一次复刻这个案例时照着走。

动态徽章最关键的是：数字从哪里来，又怎么被改掉

这页的 isShow 依旧只是外层开关，真正有业务味的是 msgCount 和 notifCount。它们分别代表两类提醒来源：消息和通知。数量一变，Badge 立刻跟着刷新，这就是动态徽章和静态展示最大的区别。

这里可以按两条线来读：

• msgCount 对应消息入口，按钮点击后增减数量，适合模拟聊天、评论、私信这类高频提醒。
• notifCount 对应通知入口，和消息分开维护，说明不同业务入口最好不要共用同一个计数状态。
• 减少数量时加了 > 0 判断，避免出现负数，这个细节放到真实项目里也很重要。

所以这页真正示范的是“计数状态如何驱动 Badge 实时反馈”。后面接 WebSocket、接口轮询或者本地已读逻辑，都可以沿着这个状态模型扩展。

哪几个函数最值得先看

读函数别贪多。对 动态更新徽章页 这种页面来说，真正有阅读价值的往往是那几段会改状态、触发交互或者推动页面切换的逻辑。

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

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

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

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

@State isShow: boolean = true
  @State msgCount: number = 0
  @State notifCount: number = 0

  build() {
    Column() {
      if (this.isShow) {
        Column() {
          Text('Badge 计数动态更新')
            .fontSize(18).fontWeight(FontWeight.Bold).fontColor('#4ECDC4').margin({ bottom: 4 })
          Text('点击按钮增减计数，Badge 数字实时变化')
            .fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({ bottom: 12 })
        }
        .width('100%').alignItems(HorizontalAlign.Start)

        Row() {
          Column() {
            Badge({ count: this.msgCount, position: BadgePosition.RightTop, maxCount: 99, style: { badgeSize: 16, badgeColor: '#FA2A2D' } }) {
              Column() {
                Text('💬').fontSize(36)
                Text('消息').fontSize(12).fontColor('#666').margin({ top: 4 })
              }
              .width(80).height(80)
              .backgroundColor(DEMO_CARD_COLOR).borderRadius(14).justifyContent(FlexAlign.Center)

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

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

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

这一段真正要看的是状态更新路径。按钮点击后直接修改 msgCount 或 notifCount，而 Badge 又绑定这些状态，所以页面反馈会立刻发生。

Badge({ count: this.msgCount, position: BadgePosition.RightTop, maxCount: 99, style: { badgeSize: 16, badgeColor: '#FA2A2D' } }) {
              Column() {
                Text('💬').fontSize(36)
                Text('消息').fontSize(12).fontColor('#666').margin({ top: 4 })
              }
              .width(80).height(80)
              .backgroundColor(DEMO_CARD_COLOR).borderRadius(14).justifyContent(FlexAlign.Center)
            }
            Row() {
              Button('+').fontSize(16).width(32).height(28).backgroundColor('#E0E0E0')
                .onClick(() => { this.msgCount++ })
              Button('-').fontSize(16).width(32).height(28).backgroundColor('#E0E0E0').margin({ left: 4 })
                .onClick(() => { if (this.msgCount > 0) this.msgCount-- })
            }.margin({ top: 8 })
          }.margin({ right: 16 })

          Column() {
            Badge({ count: this.notifCount, position: BadgePosition.RightTop, maxCount: 99, style: { badgeSize: 16, badgeColor: '#4D96FF' } }) {
              Column() {
                Text('🔔').fontSize(36)
                Text('通知').fontSize(12).fontColor('#666').margin({ top: 4 })
              }
              .width(80).height(80)
              .backgroundColor(DEMO_CARD_COLOR).borderRadius(14).justifyContent(FlexAlign.Center)

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

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

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

把页面跑起来之后，建议你这样操作一遍

文章讲再多，都不如自己把页面点一遍。尤其是 动态更新徽章页 这种带明显交互结果的页面，只看代码很难建立手感。

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

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

如果我把它迁进正式项目

示例页最大的风险，就是你觉得“这不难”，结果真要迁进项目里，发现数据、样式、交互边界全要补。这里提前把这些坑说开。

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

这个案例为什么值得留一份

它真正值得保留的地方，不只是效果能跑出来，而是写法相对克制。你以后回来翻，会发现它很适合当中间层模板。

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

完整代码

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

/**
 * 动态更新徽章页
 */
import { PRESET_COLORS, DEMO_BG_COLOR, DEMO_CARD_COLOR, DEMO_THEME_COLOR, DEMO_SUBTEXT_COLOR } from './types'

@Entry
@Component
struct BadgeDynamicCounterUpdate {
  @State isShow: boolean = true
  @State msgCount: number = 0
  @State notifCount: number = 0

  build() {
    Column() {
      if (this.isShow) {
        Column() {
          Text('Badge 计数动态更新')
            .fontSize(18).fontWeight(FontWeight.Bold).fontColor('#4ECDC4').margin({ bottom: 4 })
          Text('点击按钮增减计数，Badge 数字实时变化')
            .fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({ bottom: 12 })
        }
        .width('100%').alignItems(HorizontalAlign.Start)

        Row() {
          Column() {
            Badge({ count: this.msgCount, position: BadgePosition.RightTop, maxCount: 99, style: { badgeSize: 16, badgeColor: '#FA2A2D' } }) {
              Column() {
                Text('💬').fontSize(36)
                Text('消息').fontSize(12).fontColor('#666').margin({ top: 4 })
              }
              .width(80).height(80)
              .backgroundColor(DEMO_CARD_COLOR).borderRadius(14).justifyContent(FlexAlign.Center)
            }
            Row() {
              Button('+').fontSize(16).width(32).height(28).backgroundColor('#E0E0E0')
                .onClick(() => { this.msgCount++ })
              Button('-').fontSize(16).width(32).height(28).backgroundColor('#E0E0E0').margin({ left: 4 })
                .onClick(() => { if (this.msgCount > 0) this.msgCount-- })
            }.margin({ top: 8 })
          }.margin({ right: 16 })

          Column() {
            Badge({ count: this.notifCount, position: BadgePosition.RightTop, maxCount: 99, style: { badgeSize: 16, badgeColor: '#4D96FF' } }) {
              Column() {
                Text('🔔').fontSize(36)
                Text('通知').fontSize(12).fontColor('#666').margin({ top: 4 })
              }
              .width(80).height(80)
              .backgroundColor(DEMO_CARD_COLOR).borderRadius(14).justifyContent(FlexAlign.Center)
            }
            Row() {
              Button('+').fontSize(16).width(32).height(28).backgroundColor('#E0E0E0')
                .onClick(() => { this.notifCount++ })
              Button('-').fontSize(16).width(32).height(28).backgroundColor('#E0E0E0').margin({ left: 4 })
                .onClick(() => { if (this.notifCount > 0) this.notifCount-- })
            }.margin({ top: 8 })
          }
        }.justifyContent(FlexAlign.Center).width('100%')
        .backgroundColor(DEMO_CARD_COLOR).borderRadius(12).padding(16)

        Text('💡 @State 修饰的 count 变量变化时 Badge 自动刷新').fontSize(11).fontColor('#999').margin({ top: 12, left: 4 })
      }
      Text('动态更新徽章页 - Badge 动态更新：@State 驱动计数实时变化')
        .fontSize(12).fontColor('#999999').margin({ top: 12 })
    }
    .width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)
  }
}

收个尾

动态更新徽章页 这一页我建议你至少亲手改一次。哪怕只是换一组数据、调一个布局、补一个状态字段，你都会比只看文章更快进入自己的节奏。