前言

角标数字一旦变大，页面就会开始尴尬。99、999、9999，到底怎么显示才既不夸张又不失真？这个案例专门把 maxCount 拎出来讲，特别适合做信息密度控制。 这一页适合慢一点读，不是因为代码特别难，而是因为它里面很多决定都和真实页面很像。把这些决定看懂，比把组件名字记住更值钱。

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

这类写法尤其适合落在 消息系统、社交提醒、后台待办入口 这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

别急着抄，先认结构

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

页面区域	主要职责	在代码里的典型表现
头部说明区	交代当前案例在演示什么	Text 标题、补充说明、标签文案
核心展示区	承载组件能力的主要效果	Column、Row、业务组件本体

| 辅助信息区 | 补充状态、标签、分组或统计信息 | 次级文本、角标、分组标题、描述块 |
| 交互入口区 | 负责切换、返回、定位、选择等动作 | 点击事件、按钮、索引条、导航入口 |

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

这个案例表面看是界面效果，真正该盯的是状态怎么流动，因为大多数可复用价值都藏在这里。

maxCount 不是遮数字，而是在控制信息压力

这页的 isShow 仍然只是页面展示开关，真正应该盯住的是每一项里的 count 和 max。它们组合起来决定了一个很实际的问题：当数量太大时，页面到底要不要把完整数字全塞给用户。

我会把这里拆成三种业务含义来看：

• 未超限：比如 50/99，用户看到的是准确数量，适合信息量还能被快速理解的场景。
• 刚到上限：比如 99/99，它告诉用户已经接近高压状态，但仍然保持完整表达。
• 超过上限：比如 100→99+，重点不再是精确数字，而是告诉用户“这里很多，需要处理”。

所以 maxCount 的价值不是把数字省掉，而是避免角标变成视觉噪音。真实项目里消息、待办、购物车都需要这个边界。

时间不多的话，先盯这几个入口

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

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

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

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

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

@State isShow: boolean = true

  build() {
    Column() {
      if (this.isShow) {
        Column() {
          Text('Badge 最大值 maxCount')
            .fontSize(18).fontWeight(FontWeight.Bold).fontColor('#6BCB77').margin({ bottom: 4 })
          Text('超过 maxCount 显示为 "99+"，默认最大值为 99')
            .fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({ bottom: 12 })
        }
        .width('100%').alignItems(HorizontalAlign.Start)

        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach([
            { count: 50, max: 99, label: '50/99' },
            { count: 99, max: 99, label: '99/99' },
            { count: 100, max: 99, label: '100→99+' },
            { count: 50, max: 50, label: '50/50' },
            { count: 88, max: 100, label: '88/100' },
            { count: 101, max: 100, label: '101→100+' },
            { count: 999, max: 99, label: '999→99+' }
          ], (item: BadgeMaxcountDemoItem) => {
            Badge({

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

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

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

这一段最值得看的不是 Badge 写法本身，而是 count 和 maxCount 怎么一起工作。它把真实数量和展示上限拆开，让页面既保留提醒强度，又避免大数字破坏布局。

Badge({
              count: item.count,
              maxCount: item.max,
              position: BadgePosition.RightTop,
              style: { badgeSize: 16, badgeColor: '#FA2A2D' }
            }) {
              Column() {
                Text(item.label as string).fontSize(10).fontColor('#666')
              }
              .width(56).height(56)
              .backgroundColor(DEMO_CARD_COLOR)
              .borderRadius(10)
              .justifyContent(FlexAlign.Center)
            }.margin({ right: 10, bottom: 10 })
          })
        }.width('100%')
        .backgroundColor(DEMO_CARD_COLOR).borderRadius(12).padding(12)
      }
      Text('徽章最大值处理页 - Badge maxCount：超限显示 "count+"')
        .fontSize(12).fontColor('#999999').margin({ top: 12 })
    }
    .width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)
  }
}

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

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'


interface BadgeMaxcountDemoItem {
  count: number
  max: number
  label: string
}
@Entry
@Component
struct BadgeMaxcountDemo {
  @State isShow: boolean = true

  build() {
    Column() {
      if (this.isShow) {
        Column() {
          Text('Badge 最大值 maxCount')
            .fontSize(18).fontWeight(FontWeight.Bold).fontColor('#6BCB77').margin({ bottom: 4 })
          Text('超过 maxCount 显示为 "99+"，默认最大值为 99')
            .fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({ bottom: 12 })
        }
        .width('100%').alignItems(HorizontalAlign.Start)

        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach([
            { count: 50, max: 99, label: '50/99' },
            { count: 99, max: 99, label: '99/99' },
            { count: 100, max: 99, label: '100→99+' },
            { count: 50, max: 50, label: '50/50' },
            { count: 88, max: 100, label: '88/100' },
            { count: 101, max: 100, label: '101→100+' },
            { count: 999, max: 99, label: '999→99+' }
          ], (item: BadgeMaxcountDemoItem) => {
            Badge({
              count: item.count,
              maxCount: item.max,
              position: BadgePosition.RightTop,
              style: { badgeSize: 16, badgeColor: '#FA2A2D' }
            }) {
              Column() {
                Text(item.label as string).fontSize(10).fontColor('#666')
              }
              .width(56).height(56)
              .backgroundColor(DEMO_CARD_COLOR)
              .borderRadius(10)
              .justifyContent(FlexAlign.Center)
            }.margin({ right: 10, bottom: 10 })
          })
        }.width('100%')
        .backgroundColor(DEMO_CARD_COLOR).borderRadius(12).padding(12)
      }
      Text('徽章最大值处理页 - Badge maxCount：超限显示 "count+"')
        .fontSize(12).fontColor('#999999').margin({ top: 12 })
    }
    .width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)
  }
}

收个尾

如果你最近正好要做 消息系统、社交提醒、后台待办入口，那这篇可以直接当起步模板。先跑通，再替换数据和交互，效率会比从空白页起步高很多。