当前位置：网站首页 > 技术文章 > 正文

HarmonyOS NEXT - ArkUI: Button组件

zhezhongyun 2025-05-08 08:03 25 浏览

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

Button组件可以包含子组件。

```typescript

Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

```

label：按钮显示的文字内容

type：定义按钮样式

stateEffect：设置按钮按下时是否开启切换效果，默认值为true开启。

ButtonType枚举类型：

- ButtonType.Capsule：胶囊型按钮（圆角为高度的一半），默认值。此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

- ButtonType.Circle：圆形按钮。此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。

- ButtonType.Normal：正常按钮。此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

stateEffect：

按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。

- 默认值：true

- 说明：当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。

自定义样式

- 设置边框弧度。使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。

- 设置文本样式。通过添加文本样式设置按钮文本的展示样式。

- 设置背景颜色。添加backgroundColor属性设置按钮的背景颜色。

包含子组件

```typescript

Button({ type: ButtonType.Circle }) {

Image($r('app.media.add'))

.fillColor(Color.White)

.width(30)

.height(30)

}

.width(50)

.height(50)

```

设置按钮点击事件

```typescript

.onClick(() => {

// 处理点击事件逻辑

this.message+="+";

})

```

代码实例：ButtonPage

```typescript

@Entry

@Component

struct ButtonPage {

@State message: string = '第4节 Button组件';

build() {

Column({space:6}) {

Text(this.message)

.fontSize(30)

.fontWeight(FontWeight.Bold)

Button("默认胶囊按钮")

Button('设置为Normal的按钮',{type:ButtonType.Normal})

Button('圆形按钮',{type:ButtonType.Circle}).width(100)

Button({type:ButtonType.Circle}){

Image($r('app.media.add')).fillColor(Color.White).width(30).height(30)

}.width(50).height(50)

.onClick(()=>{

//点击事件业务逻辑

this.message+="+";

})

}

.height('100%')

.width('100%')

}

```

HTML button type 属性

上一篇：Java中优雅处理文件上传的艺术（java上传文件并设置权限）
下一篇：VUE3 你不知道的按钮与菜单权限（vue 弹出菜单）

HarmonyOS NEXT - ArkUI: Button组件

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）