HarmonyOS NEXT鸿蒙开发：Button按钮

作者：马育民 • • 阅读：10062

介绍

官方API

Button 按钮组件，可创建不同样式的按钮，是用户与应用进行交互的主要方式之一。

应用场景

通常用于触发操作，如：

  • 提交表单，如：登录、注册
  • 打开页面
  • 增加/减少数值

使用方式1

创建可以包含单个子组件的按钮，如：图片按钮

Button(options?: ButtonOptions)

参数解释：

  • options?: ButtonOptions类型，必填，配置按钮的显示样式。

例子-图标按钮

将上面图片放到下面目录：

src/main/resources/rawfile

代码：

Button() {
        Image($rawfile("cangshu.png"))
          .width(24)
          .height(24)
      }

使用方式2

使用文本内容创建相应的按钮组件，此时Button无法包含子组件。

Button(label: ResourceStr, options?: ButtonOptions)

参数解释：

  • label: ResourceStr 类型，必填，按钮显示的文本内容
  • options?: ButtonOptions，非必填，配置按钮的显示样式

例子-普通按钮

Button("登录")

ButtonOptions对象说明

  • type：ButtonType类型，非必填，描述按钮显示样式：
    • ButtonType.Capsule：胶囊型按钮（圆角默认为高度的一半），默认值
    • ButtonType.Circle：圆形按钮
    • ButtonType.Normal：普通按钮（默认不带圆角）
  • buttonStyle：ButtonStyleMode类型，非必填，描述按钮的样式和重要程度，设置以下值：
    • ButtonStyleMode.NORMAL：普通按钮，蓝底白字，默认值
    • ButtonStyleMode.TEXTUAL：文本按钮，没有背景色，蓝色字
    • ButtonStyleMode.EMPHASIZED：强调按钮

例子

Button(
  "登录",
  {
    type:ButtonType.Normal, // 普通按钮
    buttonStyle:ButtonStyleMode.NORMAL // 白底蓝字
    // buttonStyle:ButtonStyleMode.EMPHASIZED, // 蓝底白字
    // buttonStyle:ButtonStyleMode.TEXTUAL, // 篮色字

  }
)

常用样式方法

方法 作用 示例
.width(value) 设置按钮宽度 .width(120) 或 .width('80%')
.height(value) 设置按钮高度 .height(40)
.backgroundColor(color) 设置背景颜色 .backgroundColor(Color.Blue)
.fontColor(color) 设置文字颜色 .fontColor(Color.White)
.fontSize(size) 设置文字大小 .fontSize(16)
.fontWeight(weight) 设置文字粗细 .fontWeight(FontWeight.Bold)
.borderRadius(radius) 设置圆角半径 .borderRadius(20)
.margin(value) 设置外边距 .margin({ top: 10 })
.padding(value) 设置内边距 .padding(10)
.type(type) 设置按钮类型 .type(ButtonType.Capsule)

例子

Button('登录')
    .width('90%')
    .height(48)
    .backgroundColor(Color.Blue)
    .fontColor(Color.White)
    .fontSize(16)
    .fontWeight(FontWeight.Bold)
    .borderRadius(24)
    .margin({ top: 20 })

按钮类型

通过 .type() 方法可以设置按钮的不同预设样式，同上面 ButtonType：

import { Button, ButtonType } from 'harmony';

// 普通按钮（默认）
Button('普通按钮').type(ButtonType.Normal)

// 圆角按钮
Button('圆角按钮').type(ButtonType.Circle)

// 胶囊按钮（两端半圆）
Button('胶囊按钮').type(ButtonType.Capsule)

事件处理

事件介绍

处理点击事件

按钮的核心功能是响应用户的点击。使用 .onClick() 方法来绑定点击事件的处理函数。

简单例子：

Button('Confirm')
  .onClick(() => {
    console.log('Confirmed!');
    // 可触发状态更新或业务逻辑
  })

复杂例子：

@Entry
struct MyPage {
    @State clickCount: number = 0;

    build() {
        Column() {
            Text(`已点击 ${this.clickCount} 次`)
                .fontSize(18)
                .margin(20)

            // 绑定点击事件
            Button('点我增加')
                .width('60%')
                .height(45)
                .backgroundColor('#007DFF')
                .fontColor(Color.White)
                .onClick(() => {
                    // 点击时执行的逻辑
                    this.clickCount += 1;
                    console.info('按钮被点击了，当前计数：' + this.clickCount);
                })
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
    }
}

关键点：

  • .onClick() 接收一个回调函数。
  • 在回调函数中可以执行任何业务逻辑，如更新状态（@State）、发起网络请求、页面跳转等。
  • 修改 @State 状态会自动触发 UI 重新渲染。

长按事件

Button('Long Press')
  .onLongPress(() => {
    console.log('Long pressed!');
  })

触摸事件

Button('Touch Events')
  .onTouch((event: TouchEvent) => {
    if (event.type === TouchType.Down) {
      console.log('Touch down');
    } else if (event.type === TouchType.Up) {
      console.log('Touch up');
    }
  })

总结

Button 是鸿蒙应用中实现用户交互的基石。通过：

  • Button('文本') 创建按钮。
  • 链式调用 设置样式（宽、高、颜色、圆角等）。
  • .type() 设置按钮类型。
  • .onClick() 绑定点击事件处理逻辑。

原文出处：/show_1GW1yAFn9gFm.html

吉ICP备15003043号