【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— Button按钮组件

概述

Button为按钮组件,通常用于响应用户的点击操作。

参数

Button组件有两种使用方式,分别是不包含子组件和包含子组件,两种方式下,Button 组件所需的参数有所不同,下面分别介绍


不包含子组件

不包含子组件时,Button组件所需的参数如下

typescript 复制代码
Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })

label:
label为按钮上显示的文字内容。


options.type:
options.type为按钮形状,该属性的类型ButtonType,可选的枚举值有

ButtonType.Capsule: 胶囊形状
ButtonType.Circle: 圆形
ButtonType.Normal : 普通形状


options.stateEffect:
options.stateEffect表示是否开启点击效果,点击效果如下

包含子组件

子组件会作为按钮上显示的内容,可以是图片、文字等。这种方式下,Button组件就不在需要label参数了,具体如下

typescript 复制代码
Button(options?: {type?: ButtonType, stateEffect?: boolean})

常用属性

背景颜色

按钮的颜色可使用backgroundColor()方法进行设置,例如

typescript 复制代码
Button('绿色按钮').backgroundColor(Color.Green)

边框圆角

按钮的边框圆角大小可使用borderRadius()方法进行设置,例如

typescript 复制代码
Button('圆角按钮', { type: ButtonType.Normal }).borderRadius(10)

常用事件

对于Button组件而言,最为常用的就是点击事件,可以通过onClick()方法为按钮绑定点击事件,该方法的参数为一个回调函数,当按钮被点击时,就会触发该回调函数,例如

typescript 复制代码
Button('点击事件').onClick(() => {
  console.log('我被点击了')
})
相关推荐
我爱挣钱我也要早睡!31 分钟前
Java 复习笔记
java·开发语言·笔记
汇能感知5 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun6 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao6 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
爱笑的眼睛116 小时前
HarmonyOS 应用开发新范式:深入探索 Stage 模型与 ArkUI 声明式开发
华为·harmonyos
是誰萆微了承諾6 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT7 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
ST.J7 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
Suckerbin7 小时前
LAMPSecurity: CTF5靶场渗透
笔记·安全·web安全·网络安全
小憩-8 小时前
【机器学习】吴恩达机器学习笔记
人工智能·笔记·机器学习