Button

鸿蒙开发以身入局
声明式 UI，内有大乾坤
组件学习开始了
掌握 Button 组件

  • 按钮组件
  • 可以快速创建不同样式的按钮
  • 可以使用通用属性修饰

参数

参数名参数类型是否必填参数描述
labelResourceStr否按钮的文本内容
options{ type?: ButtonType, stateEffect?: boolean}否按钮的配置项: type：按钮的样式，stateEffect： 按钮的按压效果

ButtonType 枚举说明

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

示例 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Button('A', {
          type: ButtonType.Circle,
          stateEffect: false
        })

        Blank()

        Button('OK', {
          type: ButtonType.Capsule,
          stateEffect: true
        })

        Blank()

        Button('Disable', {
          type: ButtonType.Normal,
          stateEffect: false
        }).opacity(0.4)
      }.width('100%').height(100).padding(20)
    }
  }
}

示例 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Button('登录')

        Blank()

        Button('注册').backgroundColor(Color.Orange)
      }.width('100%').height(100).padding(20)
    }
  }
}

示例 3

支持组件嵌套（ 就相当于是原先的双标签， 内部可以继续嵌套其他结构 ）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Button() {
          Row() {
            LoadingProgress().width(20).height(20).color(0xFFFFFF)
            Text('Loading')
          }
        }.height(50).padding(10).backgroundColor(Color.Orange)
      }.width('100%').height(100).padding(20)
    }
  }
}