【鸿蒙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('我被点击了')
})
相关推荐
序属秋秋秋1 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
quant_19863 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
宝山哥哥8 小时前
网络信息安全学习笔记1----------网络信息安全概述
网络·笔记·学习·安全·网络安全
逼子格9 小时前
逻辑门电路Multisim电路仿真汇总——硬件工程师笔记
笔记·硬件工程师·multisim·电路仿真·逻辑门·硬件工程师学习·电路图
@Hwang9 小时前
【ESP32-IDF笔记】09-UART配置和使用
笔记·esp32·uart·esp32s3·esp32-idf
前端世界10 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
霖0010 小时前
C++学习笔记三
运维·开发语言·c++·笔记·学习·fpga开发
巴伦是只猫11 小时前
【机器学习笔记 Ⅲ】1 无监督学习
笔记·学习·机器学习
kfepiza12 小时前
Debian10安装Mysql5.7.44 笔记250707
笔记·mysql·debian
kfepiza12 小时前
Linux的`if test`和`if [ ]中括号`的取反语法比较 笔记250709
linux·服务器·笔记·bash