【鸿蒙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 小时前
Linux之Socket 编程 UDP
linux·服务器·c++·经验分享·笔记·网络协议·udp
sealaugh323 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
遇到困难睡大觉哈哈4 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
freexyn6 小时前
Matlab自学笔记六十一:快速上手解方程
数据结构·笔记·matlab
很小心的小新7 小时前
12、jvm运行期优化
java·开发语言·jvm·笔记
幽蓝计划7 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说7 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
寻丶幽风9 小时前
论文阅读笔记——NoPoSplat
论文阅读·笔记·三维重建·3dgs·相机位姿·dustr
Georgewu10 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉10 小时前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos