鸿蒙UI系统组件02——按钮(Button)

鸿蒙Button组件详解

最新推荐文章于 2025-09-23 15:55:53 发布

原创

最新推荐文章于 2025-09-23 15:55:53 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #ui #鸿蒙

如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！扫描下面的名片关注公众号。

1、概述

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

2、创建按钮

Button通过调用接口来创建，接口调用有以下两种形式：

创建不包含子组件的按钮

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

该接口用于创建不包含子组件的按钮，其中label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

Button('Ok', { type: ButtonType.Normal, stateEffect: true })   .borderRadius(8)   .backgroundColor(0x317aff)   .width(90)  .height(40)

创建包含子组件的按钮。

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

该接口用于创建包含子组件的按钮，只支持包含一个子组件，子组件可以是基础组件或者容器组件。

Button({ type: ButtonType.Normal, stateEffect: true }) {
  
    Row() {
  
      Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 })    Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })  }.alignItems(VerticalAlign.Center)}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)