【鸿蒙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('我被点击了')
})
相关推荐
高心星3 小时前
鸿蒙5.0应用开发——V2装饰器@Provider和@Consumer的使用
harmonyos
ChinaDragon7 小时前
HarmonyOS:ArkTS卡片页面刷新
harmonyos
HMSCore7 小时前
通知语音播报功能,解锁全新体验
harmonyos
HarmonyOS_SDK7 小时前
通知语音播报功能,解锁全新体验
harmonyos
高心星8 小时前
鸿蒙5.0应用开发——V2装饰器@ObservedV2和@Trace的使用
harmonyos
城中的雾9 小时前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
程序员潘Sir10 小时前
鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法
harmonyos·鸿蒙
高心星1 天前
鸿蒙5.0项目开发——V2装饰器@Event的使用
harmonyos
ChinaDragon1 天前
HarmonyOS:创建ArkTS卡片
harmonyos