鸿蒙应用开发从入门到实战（十二）：ArkUI组件Button&Toggle

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文主要讲解按钮组件Button和Toggle的使用。
一、按钮Button

1.1 概述

Button为按钮组件，通常用于响应用户的点击操作。
1.2 参数

Button组件有两种使用方式，分别是不包含子组件和包含子组件，两种方式下，Button 组件所需的参数有所不同，下面分别介绍
1.2.1 不包含子组件

不包含子组件时，Button组件所需的参数如下

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

复制代码

• label
  

label为按钮上显示的文字内容。

• options.type
  

options.type为按钮形状，该属性的类型ButtonType，可选的枚举值有
名称描述效果ButtonType.Capsule胶囊形状

ButtonType.Circle圆形

)ButtonType.Normal普通形状

• options.stateEffect
  

options.stateEffect表示是否开启点击效果，点击效果如下

1.2.2 包含子组件

子组件会作为按钮上显示的内容，可以是图片、文字等。这种方式下，Button组件就不在需要label参数了，具体如下

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

复制代码

示例代码：
拷贝icon_new_folder.png到resources/base/media目录下
在component目录下新建button目录，新建ButtonParameter.ets文件

1. @Entry
2. @Component
3. // Button按钮参数
4. struct ButtonParameter {
6.   build() {
7.     Column({ space: 50 }) {
9.       //1、不包含子组件
10.       Button('按钮', { type: ButtonType.Capsule, stateEffect: false })
11.         .fontSize(25)
12.         .width(150)
13.         .height(60)
15.       //2、包含子组件
16.       Button({ type: ButtonType.Capsule, stateEffect: true }) {
17.         Row({ space: 5 }) {
18.           Image($r('app.media.icon_new_folder'))
19.             .width(30)
20.             .height(30)
21.           Text('新建')
22.             .fontColor(Color.White)
23.             .fontSize(25)
24.             .fontWeight(500)
25.         }
26.       }.height(60)
27.       .width(150)
29.     }.width('100%')
30.     .height('100%')
31.     .justifyContent(FlexAlign.Center)
32.   }
33. }

复制代码

1.3 常用属性

1.3.1 背景颜色

按钮的颜色可使用backgroundColor()方法进行设置，例如

1. Button('绿色按钮').backgroundColor(Color.Green)

复制代码

1.3.2 边框圆角

按钮的边框圆角大小可使用borderRadius()方法进行设置，例如

1. Button('圆角按钮', { type: ButtonType.Normal }).borderRadius(10)

复制代码

示例代码：
button目录下新建ButtonAttributePage.ets文件

1. @Entry
2. @Component
3. // Button按钮属性
4. struct ButtonAttributePage {
6.   build() {
7.     Row() {
8.       // 1、背景颜色 backgroundColor
9.       Column({ space: 50 }) {
10.         Button('绿色按钮')
11.           .fontSize(25)
12.           .width(150)
13.           .height(60)
14.           .backgroundColor(Color.Green)
16.         // 2、边框圆角 borderRadius
17.         Button('圆角按钮', { type: ButtonType.Normal })
18.           .fontSize(25)
19.           .width(150)
20.           .height(60)
21.           .borderRadius(20)
23.       }.width('100%')
24.       .height('100%')
25.       .justifyContent(FlexAlign.Center)
26.     }
27.   }
28. }

复制代码

1.4 常用事件

对于Button组件而言，最为常用的就是点击事件，可以通过onClick()方法为按钮绑定点击事件，该方法的参数为一个回调函数，当按钮被点击时，就会触发该回调函数，例如

1. Button('点击事件').onClick(() => {
2.   console.log('我被点击了')
3. })

复制代码

示例代码：
在button目录下新建ButtonEventPage.ets文件

1. @Entry
2. @Component
3. // Button按钮事件
4. struct ButtonEventPage {
6.   build() {
7.     Row() {
8.       // 1、点击事件
9.       Column({ space: 50 }) {
10.         Button('点击事件')
11.           .fontSize(25)
12.           .width(150)
13.           .height(60)
14.           .onClick(() => {
15.             console.log('我被点击了')
16.           })
19.       }.width('100%')
20.       .height('100%')
21.       .justifyContent(FlexAlign.Center)
22.     }
23.   }
24. }

复制代码

二、切换按钮Toggle

2.1 概述

Toggle为切换按钮组件，一般用于两种状态之间的切换，例如下图中的蓝牙开关。

2.2 参数

Toggle组件的参数定义如下

1. Toggle(options: { type: ToggleType, isOn?: boolean })

复制代码

• type
  

type属性用于设置Toggle组件的类型，可通过ToggleType枚举类型进行设置，可选的枚举值如下
名称描述效果ToggleType.Switch开关

ToggleType.Checkbox复选框

ToggleType.Button按钮

1. |

复制代码

• isOn
  

isOn属性用于设置Toggle组件的状态，例如

示例代码
在component目录下新建toggle目录，新建ToggleParameter.ets 文件

1. @Entry
2. @Component
3. // 切换按钮Toggle参数
4. struct ToggleParameter {
6.   build() {
7.     // type参数设置类型;ToggleType值:开关ToggleType.Switch 复选框ToggleType.Checkbox 按钮ToggleType.Button
8.     // isON设置组件状态
9.     Column({ space: 20 }) {
10.       Row({ space: 20 }) {
11.         Toggle({ type: ToggleType.Switch, isOn: false })
12.         Toggle({ type: ToggleType.Switch, isOn: true })
13.       }
15.       Row({ space: 20 }) {
16.         Toggle({ type: ToggleType.Checkbox, isOn: false })
17.         Toggle({ type: ToggleType.Checkbox, isOn: true })
18.       }
20.       Row({ space: 20 }) {
21.         Toggle({ type: ToggleType.Button, isOn: false }) {
22.           Text('button')
23.         }
24.         Toggle({ type: ToggleType.Button, isOn: true }) {
25.           Text('button')
26.         }
27.       }
28.     }.width('100%')
29.     .height('100%')
30.     .justifyContent(FlexAlign.Center)
31.   }
32. }

复制代码

2.3 常用属性

2.3.1 选中状态背景色

可使用selectedColor()方法设置Toggle组件在选中（或打开）状态下的背景色，例如

2.3.2 Switch滑块颜色

可使用设置switchPointColor()方法设置Switch类型的Toggle组件中的圆形滑块颜色，例如

示例代码：
在toggle目录下新建ToggleAttributePage.ets文件

1. @Entry
2. @Component
3. // 切换按钮Toggle常用属性
4. struct ToggleAttributePage {
6.   build() {
7.     Row() {
8.       Column({ space: 50 }) {
10.         //1.选中状态背景色 selectedColor
11.         Row({ space: 20 }) {
12.           Toggle({ type: ToggleType.Switch, isOn: true })
13.             .selectedColor(Color.Green)
14.           Toggle({ type: ToggleType.Checkbox, isOn: true })
15.             .selectedColor(Color.Green)
16.           Toggle({ type: ToggleType.Button, isOn: true }) {
17.             Text('button')
18.           }.selectedColor('#66008000')
20.         }
22.         //2.Switch圆形滑块颜色 switchPointColor
23.         Toggle({ type: ToggleType.Switch, isOn: true })
24.           .selectedColor(Color.Green)
25.           .switchPointColor(Color.Orange)
27.       }.width('100%')
28.       .height('100%')
29.       .justifyContent(FlexAlign.Center)
30.     }
31.   }
32. }

复制代码

2.4 常用事件

Toggle组件常用的事件为change事件，每当Toggle组件的状态发生变化，就会触发change事件。开发者可通过onChange()方法为Toggle组件绑定change事件，该方法参数为一个回调函数，具体定义如下

1. onChange(callback: (isOn: boolean) => void)

复制代码

当Toggle组件的状态由关闭切换为打开时，isOn为true，从打开切换为关闭时，isOn为false。
示例代码:
拷贝素材到resources/base/media目录下，img_light.png、img_dark.png
在toggle目录下新建LightPage.ets

1. @Entry
2. @Component
3. struct LightPage {
4.   @State isOn: boolean = false;
6.   build() {
7.     Column({ space: 20 }) {
8.       if (this.isOn) {
9.         Image($r('app.media.img_light'))
10.           .height(300)
11.           .width(300)
12.           .borderRadius(20)
13.       } else {
14.         Image($r('app.media.img_dark'))
15.           .height(300)
16.           .width(300)
17.           .borderRadius(20)
18.       }
19.       Toggle({ type: ToggleType.Switch, isOn: this.isOn })
20.         .width(60)
21.         .height(30)
22.         .onChange((isOn) => {
23.           this.isOn = isOn;
24.         })
25.     }
26.     .height('100%')
27.     .width('100%')
28.     .justifyContent(FlexAlign.Center)
29.   }
30. }

复制代码

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！