一旦页面里出现嵌套滚动，很多细节都会开始复杂起来。外层容器怎么滚、内层卡片怎么吸附、手势冲突怎么避免，这些都不是纸面上看 API 能解决的。这个案例很有实践价值。我自己看这类案例时，通常不会先背属性，而是先判断它到底在解决什么页面问题。这个习惯很有用，因为一旦知道“它是给谁用、解决什么场景”，后面的代码就不容易看散。嵌套吸附页面 这一页真正有意思的地方，不是把效果堆出来，而是它把 多层滚动容器下的

索引条默认放在右侧很常见，但一旦页面结构更复杂，比如顶部有筛选区、底部有工具栏，组件摆放就没那么简单了。这个案例的价值，在于它展示了 AlphabetIndexer 在布局层面的可调空间。真到项目里，很多问题都不是“会不会用组件”，而是“这个组件放在当前页面里顺不顺手”。所以这篇不会只盯 API，而是把页面结构、交互反馈和后续扩展一起看。如果把这页当成练习材料，我会优先看它怎样围绕 索引条布局位置

本案例将展示如何使用TextInput组件创建一个具有实时验证和格式化功能的手机号码输入框，包括号码格式化、验证码发送等功能。本案例通过HarmonyOS NEXT的TextInput组件实现了一个功能完善的手机号码输入框，

头像上的角标，是很多社交和协作产品里最有辨识度的细节之一。未读消息、在线状态、身份标签，都可以挂在这里。这个案例虽然不大，但非常贴近真实产品。这一页适合慢一点读，不是因为代码特别难，而是因为它里面很多决定都和真实页面很像。把这些决定看懂，比把组件名字记住更值钱。如果把这页当成练习材料，我会优先看它怎样围绕 Badge 挂载在头像上的消息与在线状态 组织页面。因为这一层想清楚了，后面的代码基本就不会

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

颜色不是装饰，它其实在传达语义。红色像告警，绿色像正常，橙色像提醒。这个案例把 Badge 的颜色变化放到一页里，很适合理解“视觉语言”这件事。有些案例看完只会得到一个 demo 效果，有些案例看完会顺手带走一套页面组织方法。我的目标是把它往后者那边讲。别看这个案例篇幅不算长，但它很适合拿来练“页面目标和代码结构怎么对齐”这件事。你后面不管是复刻，还是准备拆成自己的业务组件，都会更顺。

当徽章不再挂在图标上，而是挂在列表项上时，页面逻辑就开始接近真实业务了。订单状态、消息未读、功能推荐，这些都很常见。这个案例的业务味比较强。真到项目里，很多问题都不是“会不会用组件”，而是“这个组件放在当前页面里顺不顺手”。所以这篇不会只盯 API，而是把页面结构、交互反馈和后续扩展一起看。别看这个案例篇幅不算长，但它很适合拿来练“页面目标和代码结构怎么对齐”这件事。你后面不管是复刻，还是准备拆成

把 Badge 放到 Tab 上，是很多应用里最真实的用法之一。因为它直接影响一级入口的信息分发方式。这个案例很适合理解导航入口和状态提示怎么共存。我一直觉得，好示例不一定代码多，但一定能把“为什么要这么写”交代清楚。标签页徽章提醒 这个页面就属于这种，值得停下来认真拆一遍。如果把这页当成练习材料，我会优先看它怎样围绕 Badge 与 Tab 组件组合使用 组织页面。因为这一层想清楚了，后面的代码

不是所有提醒都需要数字。有些时候，只告诉用户“这里有更新”就够了。这个圆点模式案例的重点，不是功能复杂，而是提醒方式更轻、更克制。如果你手上正好有类似页面要做，那这篇文章最好不要只当教程看。我更建议你边看边想：这一段如果换成我自己的业务数据，需不需要改状态，需不需要拆组件。如果把这页当成练习材料，我会优先看它怎样围绕 Badge dot 模式与轻量提醒设计 组织页面。因为这一层想清楚了，后面的代码

角标数字一旦变大，页面就会开始尴尬。99、999、9999，到底怎么显示才既不夸张又不失真？这个案例专门把 maxCount 拎出来讲，特别适合做信息密度控制。这一页适合慢一点读，不是因为代码特别难，而是因为它里面很多决定都和真实页面很像。把这些决定看懂，比把组件名字记住更值钱。别看这个案例篇幅不算长，但它很适合拿来练“页面目标和代码结构怎么对齐”这件事。你后面不管是复刻，还是准备拆成自己的业务组