在鸿蒙ArkTS开发中，Button 按钮是项目使用频率最高的交互组件，几乎所有页面的点击操作、状态切换、功能触发都依赖它。本文系统化整理 ArkTS Button 全部核心知识点，包含基础用法、样式美化、点击事件、状态动态控制、开发实战技巧，适合新手学习、期末复习、项目开发与博客收录。

一、Button 组件基础介绍

Button 是 ArkTS 提供的基础交互组件，用于接收用户点击、长按等操作，触发业务逻辑。

支持三种构建形式：

• 文字按钮（最常用）：直接传入文本显示按钮文字

• 空按钮：自定义内部布局，实现图文按钮

• 嵌套按钮：内部嵌套 Row/Column/Image/Text，实现复杂自定义按钮

二、Button 基础语法

1. 基础文字按钮

Button("确认按钮")

2. 自定义嵌套按钮

Button() { Text("自定义按钮") }

三、常用样式属性（美化必备）

所有属性支持链式调用，可自由组合实现各类按钮样式。

1. 尺寸控制

• width()：设置按钮宽度，支持固定值、百分比、自适应

• height()：设置按钮高度

2. 外观样式

• backgroundColor()：设置按钮背景颜色

• borderRadius()：设置圆角，数值越大圆角越圆润，可实现胶囊按钮

• border()：自定义边框宽度、颜色、圆角

• padding()：内边距，控制文字与按钮边缘距离

3. 文字样式

• fontSize()：按钮文字大小

• fontColor()：按钮文字颜色

• fontWeight()：文字粗细

四、核心交互事件

1. 单击事件 onClick（最核心）

用户点击按钮触发，用于提交、跳转、状态切换等绝大多数业务场景。

Button("点击测试") .onClick(() => { // 点击后执行的逻辑 })

2. 长按事件 onLongClick

用户长按按钮触发，适用于删除、弹出菜单等次要操作。

Button("长按触发") .onLongClick(() => { // 长按逻辑 })

五、按钮状态控制

1. 禁用/启用状态

通过 .enabled() 控制按钮是否可点击：true 启用、false 禁用置灰。

Button("禁用按钮") .enabled(false)

2. 动态文字切换（高频用法）

搭配 @State 状态变量 + 三元运算符，实现开关类按钮文字动态切换，适配开关、启停功能。

@State isOpen: boolean = true Button(this.isOpen ? "开关已打开" : "开关已关闭")     .onClick(() => { // 点击反转状态

 this.isOpen = !this.isOpen })

六、三种主流按钮样式

1. 实心圆角按钮（默认常用）

Button("实心按钮") 
 .backgroundColor("#007DFF") 
 .fontColor(Color.White) 
 .borderRadius(10)

2. 描边透明按钮

无背景、仅边框，常用于取消、返回等次要操作。

Button("描边按钮")

 .backgroundColor(Color.Transparent)

 .border({width:1, color:"#007DFF"})

3. 胶囊按钮

超大圆角，两端圆润，适配现代化UI风格。

Button("胶囊按钮")

 .borderRadius(50)

 七、开发最佳实践与技巧

• 表单页面按钮统一设置 width("100%")，页面更规整

• 主功能按钮用深色高亮，次要按钮用浅灰/描边样式，区分层级

• 开关类功能优先使用「布尔状态变量 + 三元表达式」动态切换文字与状态

• 频繁点击的提交按钮可增加禁用逻辑，防止重复点击

• 统一页面按钮高度、圆角，保持UI风格统一

八、完整实战案例代码

十、总结

Button 组件是 ArkTS 交互开发的基石，核心掌握三点即可应对所有开发场景：

1. 样式：宽高、圆角、背景、文字样式自由组合

2. 事件：单击、长按实现交互逻辑

3. 状态：结合 @State 实现动态文字、颜色、禁用切换