鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Button按钮组件

news/2025/1/13 7:40:42/

一、操作环境

操作系统: Windows 10 专业版

IDE:DevEco Studio 3.1

SDK:HarmonyOS 3.1

二、Button按钮组件

Button 组件也是基础组件之一，和其它基础组件不同的是 Button 组件允许添加一个子组件来实现不同的展示样式。

Button括号直接书写内容即可，下面是代码和示意图：

Button('test')Button('test').backgroundColor(Color.Pink)

2.1ButtonType枚举说明

样例：

从API version 9开始，该接口支持在ArkTS卡片中使用。

Capsule	胶囊型按钮（圆角默认为高度的一半）。
Circle	圆形按钮。
Normal	普通按钮（默认不带圆角）。

代码四种按钮示例：

      Button('默认胶囊类型')                            // 默认胶囊类型.height(40).width(120).backgroundColor('#ff0000')Button('没有圆角', {type: ButtonType.Normal}) // 没有圆角.height(40).width(120).backgroundColor('#aabbcc')Button('设置圆角', {type: ButtonType.Circle}) // 设置圆角.height(60).width(160).backgroundColor('#aabbcc')Button('胶囊类型', {type: ButtonType.Capsule}) // 胶囊类型.height(40).width(120).backgroundColor('#ff00aa')

2.2stateEffect 是否开启点击效果

stateEffect：设置是否开启点击效果，默认开启，简单样例如下所示：

Button('effect: on').fontSize(20)Button('effect: off', {stateEffect: false}).fontSize(20)

2.3按钮点击事件

onClick：给组件添加点击事件的回调，设置该回调后，当点击组件时会触发该回调。回调参数 event 包含了点击信息，比如点击坐标等。

 Button('默认胶囊类型')                            // 默认胶囊类型.height(40).width(120).backgroundColor('#ff0000').onClick(() => {                  // 设置点击事件回调console.log("亚丁号")            // 日志输出})