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

news/2024/7/21 8:14:14 标签: harmonyos

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

一、操作环境

操作系统: 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("亚丁号")            // 日志输出
          })