前言

Button 是鸿蒙 ArkUI 框架中的基础交互组件，用于触发用户操作或事件响应。其支持多种样式、状态和交互逻辑，能够满足不同场景下的 UI 设计需求‌。

Button 类型与创建方法‌

胶囊按钮 (Capsule)

圆角胶囊形状，常用于主要操作按钮。

Button('确认', { type: ButtonType.Capsule })

‌圆形按钮 (Circle)

圆形外观，适用于图标按钮或次要操作。

Button('+', { type: ButtonType.Circle })

普通按钮 (Normal)

直角矩形，适用于常规操作。

Button('提交',{type:ButtonType.Normal})

样式与状态管理

尺寸与颜色

Button('自定义样式')
        .width(200)
        .height(50)
        .backgroundColor('red')
        .fontColor(Color.White)

‌边框与圆角

 Button('边框样式')
        .border({ width: 2, color: Color.Black })
        .borderRadius(10)

状态效果

按压态‌：默认开启按压态颜色叠加效果，可通过 stateEffect(false) 关闭‌。‌

Button('无按压反馈')
      .stateEffect(true)  // 关闭按压态颜色变化
      .backgroundColor('#007DFF')

禁用态‌：使用 .enabled(false) 设置按钮不可点击‌。

 Button('不可操作')
      .enabled(false)  // 禁用点击事件
      .backgroundColor('#333333')  

事件处理

Button 支持通过onClick方法绑定点击事件。如下，点击触发按钮后会弹出操作成功提示。

import prompt from '@ohos.prompt'

Button('点击触发')  
  .onClick(() => {  
    prompt.showToast({ message: '操作成功！' });  
  })  

最佳实践

表单校验

通过 @State 变量动态控制按钮禁用状态，提升表单交互合理性。可以防止用户提交无效数据，提升数据准确性‌。如下，当用户未输入数据时，提交按钮为禁用状态；当用户输入数据时，提交按钮为按压态。

@Entry
@Component
struct KeyboardExample {
  @State text: string = ''
  @State isFormValid: boolean = false;
  build() {
    Column() {
      TextInput({ placeholder: '请输入内容' })
        .onChange((value) => {
          this.isFormValid = (value.length > 0);
        })
      Button('提交')
        .enabled(this.isFormValid)

    }
    }
}

按钮状态联动

Button组件可以通过==响应式状态管理‌==实现表单按钮的智能交互。利用 @State 变量实时监测输入内容，当用户未输入有效数据时，按钮保持禁用状态；当输入符合校验规则后，按钮自动切换为可点击的按压态，从交互源头拦截无效提交，保障数据准确性的同时提供丝滑的视觉状态过渡。

@Entry
@Component
struct KeyboardExample {
  @State isLoading: boolean = false;
  build() {
Button(this.isLoading ? '提交中...' : '提交')
  .enabled(!this.isLoading)  // 禁用按钮防止重复点击
  .backgroundColor(this.isLoading ? '#CCCCCC' : '#007DFF') // 视觉反馈
  .onClick(() => {
    this.isLoading = true;
    // 模拟异步请求
    setTimeout(() => { this.isLoading = false; }, 2000);
  })
    
    }
    }

按钮组合布局

使用 Flex 容器实现按钮组横向排列，并设置间距与对齐方式。

@Entry
@Component
struct KeyboardExample {
  @State isLoading: boolean = false;
  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
      Button('返回', { type: ButtonType.Normal })
        .width('30%')
      Button('下一步', { type: ButtonType.Capsule })
        .width('60%')
    }
    .width('100%')

    }
    }

总结

今日学习之旅已圆满收笔，愿每位君子都满载而归，心有所悟！🤩

若你对这探索之旅情有独钟，何不紧随此专栏的步伐？新知如潮，连绵不绝，将与你共绘思维的绚烂篇章，舞动智慧的火花！😎

轻轻一点下方名片，加入我们的粉丝大家庭，让我们在知识的浩瀚海洋中再次相逢，携手见证智慧之花的绚丽绽放，共享求知的喜悦与盛宴！👍