一、按钮状态规范概述

在HarmonyOS 5的设计体系中，按钮作为核心交互控件，其状态管理直接影响用户体验。系统定义了8种标准状态，覆盖用户操作的完整生命周期：Normal（默认）、Hover（悬停）、Pressed（按压）、Selected（选中）、Focused（聚焦）、Disabled（禁用）、Loading（加载中）、Success（操作成功）。这些状态通过视觉反馈与逻辑控制，实现人机交互的自然衔接。

二、状态转换逻辑与触发条件

NaN

1. 基础交互流程
   • Normal → Hover：鼠标悬停触发
   • Hover → Pressed：鼠标按下触发
   • Pressed → Selected（若为可选中按钮）或返回Normal
2. 特殊状态流转
   • Normal ↔ Focused：通过Tab键或焦点管理切换
   • Normal ↔ Disabled：通过enabled属性控制
   • Loading状态：发起异步操作时触发，完成后根据结果跳转至Normal或Success

三、ArkTS代码实现示例

1. 基础状态实现（Normal、Hover、Pressed）

// 使用hoverEffect实现悬停效果
Button('基础按钮')
  .hoverEffect(HoverEffect.Scale) // 悬停时缩放
  .onTouch((event: TouchEvent) => {
    if (event.type === TouchType.Down) {
      // 按压状态样式变化
      this.isPressed = true;
    } else if (event.type === TouchType.Up) {
      this.isPressed = false;
    }
  })
  .stateStyles({
    pressed: { 
      backgroundColor: Color.Blue 
    }
  })

2. 复合状态控制（Disabled、Loading）

// 禁用与加载状态联动
@State isDisabled: boolean = false;
@State isLoading: boolean = false;

Button('提交')
  .enabled(!this.isDisabled && !this.isLoading) // 禁用控制
  .onClick(() => {
    this.isLoading = true;
    // 模拟异步操作
    setTimeout(() => {
      this.isLoading = false;
      this.isDisabled = true; // 操作后禁用
    }, 2000);
  })
  .stateStyles({
    disabled: { 
      opacity: 0.5 
    }
  })
  .loadingStyle(this.isLoading) // 加载中显示进度条

3. 选中与聚焦状态

// 单选按钮组实现Selected状态
RadioGroup()
  .onChange((index: number) => {
    this.selectedIndex = index;
  })
  .radioStyle(RadioStyle.CIRCLE)
  .options(this.options)

// 聚焦状态样式
Button('聚焦按钮')
  .focusable(true)
  .onKeyEvent((event: KeyEvent) => {
    if (event.type === KeyType.Down && event.keyCode === KeyCode.Enter) {
      // 处理回车事件
    }
  })
  .stateStyles({
    focused: {
      border: { 
        width: '2vp', 
        color: Color.Red 
      }
    }
  })

四、设计原则与最佳实践

1. 视觉一致性：不同状态应有显著区分度（如透明度、缩放比例）
2. 性能优化：避免在Loading状态频繁更新UI，推荐使用异步线程
3. 无障碍支持：通过focusable与onKeyEvent确保键盘操作可用性
4. 状态隔离：使用@State管理独立状态，避免逻辑耦合

五、总结

通过精准控制8种按钮状态，开发者能够构建符合HarmonyOS Design规范的交互体验。实际开发中需结合具体场景选择状态组合，并通过ArkTS的声明式语法高效管理UI逻辑。建议新手通过官方案例库（参考动态进度条实现）加深对状态转换的理解。