HarmonyOS Next快速入门：Button组件
原创
HarmonyOS Next快速入门：Button组件
原创
中雨
修改于 2025-07-04 14:00:41
修改于 2025-07-04 14:00:41
[##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##]
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。
Button组件可以包含子组件。
Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })label：按钮显示的文字内容
type：定义按钮样式
stateEffect：设置按钮按下时是否开启切换效果，默认值为true开启。
ButtonType枚举类型：
- ButtonType.Capsule：胶囊型按钮（圆角为高度的一半），默认值。此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。
- ButtonType.Circle：圆形按钮。此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。
- ButtonType.Normal：正常按钮。此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。
stateEffect：
按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。
- 默认值：true
- 说明：当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。
自定义样式
- 设置边框弧度。使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。
- 设置文本样式。通过添加文本样式设置按钮文本的展示样式。
- 设置背景颜色。添加backgroundColor属性设置按钮的背景颜色。
包含子组件
Button({ type: ButtonType.Circle }) {
Image($r('app.media.add'))
.fillColor(Color.White)
.width(30)
.height(30)
}
.width(50)
.height(50)设置按钮点击事件
.onClick(() => {
// 处理点击事件逻辑
this.message+="+";
})代码实例：ButtonPage
@Entry
@Component
struct ButtonPage {
@State message: string = '第4节 Button组件';
build() {
Column({space:6}) {
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
Button("默认胶囊按钮")
Button('设置为Normal的按钮',{type:ButtonType.Normal})
Button('圆形按钮',{type:ButtonType.Circle}).width(100)
Button({type:ButtonType.Circle}){
Image($r('app.media.add')).fillColor(Color.White).width(30).height(30)
}.width(50).height(50)
.onClick(()=>{
//点击事件业务逻辑
this.message+="+";
})
}
.height('100%')
.width('100%')
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
