文章目录
- 前言
- 先看页面在做什么
- 小白先抓这条主线
- 关键代码拆开讲
- 完整代码
- 常见误区
- 继续扩展
前言
这篇继续聊 HarmonyOS7 里的Button 加载状态。如果你刚开始学 ArkUI，不建议一上来就背属性名，那样很容易看完就忘。更好的方式是先搞清楚：这个页面想解决什么问题，用户做了什么操作，代码又是怎么把这个操作反映到界面上的。
这个案例的核心是LoadingProgress，它对应的使用场景是异步操作。我会把它当成一个真实业务里的小模块来拆，而不是只贴一段代码结束。读完之后，你至少应该能知道这几件事：
| 问题 | 答案 |
|---|---|
| 学什么 | LoadingProgress在异步操作场景里的用法 |
| 看哪里 | 状态字段、核心组件、事件回调 |
| 重点 | 加载反馈 |
| 适合谁 | 刚接触 HarmonyOS7 声明式 UI 的同学 |
先看页面在做什么
先把页面目标说清楚。这个案例不是为了炫技，而是展示一个常见交互片段：页面上有内容展示，有样式区分，也有用户操作后的反馈。小白读这类代码时，最容易犯的错误是从第一行样式属性开始抠细节，结果看了半天不知道页面到底在干什么。
我更建议按这个顺序看：
- 找到
@State，确认页面有哪些会变化的数据。 - 找到核心组件，比如
LoadingProgress，看看它接收了哪些参数。 - 找到
onChange、onClick或类似回调，理解用户操作之后状态怎么变。 - 最后再看颜色、圆角、间距这些样式属性。
这样读下来，哪怕代码比较长，也不会迷路。
小白先抓这条主线
ArkUI 的声明式 UI 有个特点：界面是状态的结果。你不用手动去找某个控件再改它的文本，而是改状态，框架会根据状态重新刷新相关 UI。
在这个案例里，布局一般由Column、Row、Scroll、Grid这些容器搭起来。它们负责“东西放在哪里”；LoadingProgress负责“这个功能怎么表现”；事件回调负责“用户操作后发生什么”。三者配合起来，页面才是完整的。
下面这段关键代码可以先看一遍，它保留了入口组件和核心逻辑：
@Entry@Componentstruct LoadingActionButton{@StateisShow:boolean=true@StateisLoading:boolean=false@StateloadResult:string=''build(){Column(){if(this.isShow){Column({space:14}){Text('Loading 加载状态').fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Button('点击加载数据',{type:ButtonType.Capsule}).fontSize(16).fontColor('#FFFFFF').backgroundColor(THEME_COLOR).enabled(!this.isLoading).onClick(()=>{this.isLoading=true关键代码拆开讲
把上面的代码拆开看，会更容易理解：
@State是页面的记忆点，输入、点击、选择这类变化都会先落到这里。onClick是按钮类交互的入口，适合触发切换、清空、提交这类动作。- 按钮不只是样式组件，文案、可用状态和点击反馈都要一起设计。
这里有一个很实用的判断方法：如果你删掉某个状态字段，页面还是否能表达当前交互？如果不能，说明这个状态就是业务状态；如果删掉只是少了颜色或间距，那它更多是视觉层面的东西。
对新手来说，先区分“业务状态”和“样式配置”很重要。很多页面写乱，都是因为把这两类东西混在一起了。
完整代码
下面是完整代码。文章里的组件名已经换成更贴近业务的英文命名，可以直接复制到独立页面里阅读。建议你先跑原样，再尝试改一个状态字段或一个样式属性，看界面怎么变化。
constPAGE_BG_COLOR:string='#F5F6FA'constCARD_BG_COLOR:string='#FFFFFF'constTHEME_COLOR:string='#4D96FF'constSUBTEXT_COLOR:string='#8A8A8A'@Entry@Componentstruct LoadingActionButton{@StateisShow:boolean=true@StateisLoading:boolean=false@StateloadResult:string=''build(){Column(){if(this.isShow){Column({space:14}){Text('Loading 加载状态').fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Button('点击加载数据',{type:ButtonType.Capsule}).fontSize(16).fontColor('#FFFFFF').backgroundColor(THEME_COLOR).enabled(!this.isLoading).onClick(()=>{this.isLoading=truethis.loadResult=''setTimeout(()=>{this.isLoading=falsethis.loadResult='数据加载完成！'},2000)})if(this.isLoading){LoadingProgress().width(36).height(36).color(THEME_COLOR)}if(this.loadResult){Text(this.loadResult).fontSize(15).fontColor('#6BCB77').fontWeight(500).padding(10).backgroundColor('#F5FFF5').borderRadius(8)}Divider().strokeWidth(1).color('#EEEEEE')Row({space:12}){Button('加载中...').fontSize(14).fontColor('#FFFFFF').backgroundColor('#4D96FF').borderRadius(8)Button('处理中...').fontSize(14).fontColor('#FFFFFF').backgroundColor('#FFD93D').fontColor('#333333').borderRadius(8)}}.width('100%').alignItems(HorizontalAlign.Center).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text('加载态操作按钮：Button 加载状态：Loading 加载效果').fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width('100%').height('100%').backgroundColor(PAGE_BG_COLOR).padding(16)}}常见误区
如果把这个案例放进真实项目，我会额外注意这些点：
- 命名要清楚：状态字段最好能直接看出用途，不要都叫
value或flag。 - 边界要处理：空内容、超长内容、禁用状态、加载状态都要提前考虑。
- 样式要克制：颜色和阴影不是越多越好，能表达层级就够了。
- 交互要有反馈：用户点了、输入了、选择了，页面要给出明确变化。
这些不是语法问题，但会直接影响页面质量。
继续扩展
这个案例可以继续往两个方向练。一个方向是改数据，把静态内容换成数组或接口返回；另一个方向是改交互，比如增加清空、重置、禁用、加载中等状态。
学 HarmonyOS7 组件时，不要只满足于“代码能跑”。能说清楚为什么这么写，才算真正理解了这个案例。
