大家好，我是潘 Sir，持续分享 IT 技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI 提供了丰富的系统组件，用于制作鸿蒙原生应用 APP 的 UI，本文主要讲解按钮组件 Button 和 Toggle 的使用。
一、按钮 Button
1.1 概述
Button为按钮组件，通常用于响应用户的点击操作。
1.2 参数
Button组件有两种使用方式，分别是不包含子组件和包含子组件，两种方式下，Button 组件所需的参数有所不同，下面分别介绍
1.2.1 不包含子组件
不包含子组件时，Button组件所需的参数如下
Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
复制代码
label为按钮上显示的文字内容。
options.type为按钮形状，该属性的类型ButtonType，可选的枚举值有
options.stateEffect表示是否开启点击效果，点击效果如下
1.2.2 包含子组件
子组件会作为按钮上显示的内容，可以是图片、文字等。这种方式下，Button组件就不在需要label参数了，具体如下
Button(options?: {type?: ButtonType, stateEffect?: boolean})
复制代码
示例代码：
拷贝 icon_new_folder.png 到 resources/base/media 目录下
在 component 目录下新建 button 目录，新建 ButtonParameter.ets 文件
@Entry@Component// Button按钮参数struct ButtonParameter {
build() { Column({ space: 50 }) {
//1、不包含子组件 Button('按钮', { type: ButtonType.Capsule, stateEffect: false }) .fontSize(25) .width(150) .height(60)
//2、包含子组件 Button({ type: ButtonType.Capsule, stateEffect: true }) { Row({ space: 5 }) { Image($r('app.media.icon_new_folder')) .width(30) .height(30) Text('新建') .fontColor(Color.White) .fontSize(25) .fontWeight(500) } }.height(60) .width(150)
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
1.3 常用属性
1.3.1 背景颜色
按钮的颜色可使用backgroundColor()方法进行设置，例如
Button('绿色按钮').backgroundColor(Color.Green)
复制代码
1.3.2 边框圆角
按钮的边框圆角大小可使用borderRadius()方法进行设置，例如
Button('圆角按钮', { type: ButtonType.Normal }).borderRadius(10)
复制代码
示例代码：
button 目录下新建 ButtonAttributePage.ets 文件
@Entry@Component// Button按钮属性struct ButtonAttributePage {
build() { Row() { // 1、背景颜色 backgroundColor Column({ space: 50 }) { Button('绿色按钮') .fontSize(25) .width(150) .height(60) .backgroundColor(Color.Green)
// 2、边框圆角 borderRadius Button('圆角按钮', { type: ButtonType.Normal }) .fontSize(25) .width(150) .height(60) .borderRadius(20)
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) } }}
复制代码
1.4 常用事件
对于 Button 组件而言，最为常用的就是点击事件，可以通过onClick()方法为按钮绑定点击事件，该方法的参数为一个回调函数，当按钮被点击时，就会触发该回调函数，例如
Button('点击事件').onClick(() => { console.log('我被点击了')})
复制代码
示例代码：
在 button 目录下新建 ButtonEventPage.ets 文件
@Entry@Component// Button按钮事件struct ButtonEventPage {
build() { Row() { // 1、点击事件 Column({ space: 50 }) { Button('点击事件') .fontSize(25) .width(150) .height(60) .onClick(() => { console.log('我被点击了') })
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) } }}
复制代码
二、切换按钮 Toggle
2.1 概述
Toggle为切换按钮组件，一般用于两种状态之间的切换，例如下图中的蓝牙开关。
2.2 参数
Toggle组件的参数定义如下
Toggle(options: { type: ToggleType, isOn?: boolean })
复制代码
type属性用于设置Toggle组件的类型，可通过ToggleType枚举类型进行设置，可选的枚举值如下
isOn属性用于设置Toggle组件的状态，例如
示例代码
在 component 目录下新建 toggle 目录，新建 ToggleParameter.ets 文件
@Entry@Component// 切换按钮Toggle参数struct ToggleParameter {
build() { // type参数设置类型;ToggleType值:开关ToggleType.Switch 复选框ToggleType.Checkbox 按钮ToggleType.Button // isON设置组件状态 Column({ space: 20 }) { Row({ space: 20 }) { Toggle({ type: ToggleType.Switch, isOn: false }) Toggle({ type: ToggleType.Switch, isOn: true }) }
Row({ space: 20 }) { Toggle({ type: ToggleType.Checkbox, isOn: false }) Toggle({ type: ToggleType.Checkbox, isOn: true }) }
Row({ space: 20 }) { Toggle({ type: ToggleType.Button, isOn: false }) { Text('button') } Toggle({ type: ToggleType.Button, isOn: true }) { Text('button') } } }.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
2.3 常用属性
2.3.1 选中状态背景色
可使用selectedColor()方法设置Toggle组件在选中（或打开）状态下的背景色，例如
2.3.2 Switch 滑块颜色
可使用设置switchPointColor()方法设置 Switch 类型的 Toggle 组件中的圆形滑块颜色，例如
示例代码：
在 toggle 目录下新建 ToggleAttributePage.ets 文件
@Entry@Component// 切换按钮Toggle常用属性struct ToggleAttributePage {
build() { Row() { Column({ space: 50 }) {
//1.选中状态背景色 selectedColor Row({ space: 20 }) { Toggle({ type: ToggleType.Switch, isOn: true }) .selectedColor(Color.Green) Toggle({ type: ToggleType.Checkbox, isOn: true }) .selectedColor(Color.Green) Toggle({ type: ToggleType.Button, isOn: true }) { Text('button') }.selectedColor('#66008000')
}
//2.Switch圆形滑块颜色 switchPointColor Toggle({ type: ToggleType.Switch, isOn: true }) .selectedColor(Color.Green) .switchPointColor(Color.Orange)
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) } }}
复制代码
2.4 常用事件
Toggle组件常用的事件为 change 事件，每当Toggle组件的状态发生变化，就会触发change事件。开发者可通过onChange()方法为Toggle组件绑定 change 事件，该方法参数为一个回调函数，具体定义如下
onChange(callback: (isOn: boolean) => void)
复制代码
当Toggle组件的状态由关闭切换为打开时，isOn为true，从打开切换为关闭时，isOn为false。
示例代码:
拷贝素材到 resources/base/media 目录下，img_light.png、img_dark.png
在 toggle 目录下新建 LightPage.ets
@Entry@Componentstruct LightPage { @State isOn: boolean = false;
build() { Column({ space: 20 }) { if (this.isOn) { Image($r('app.media.img_light')) .height(300) .width(300) .borderRadius(20) } else { Image($r('app.media.img_dark')) .height(300) .width(300) .borderRadius(20) } Toggle({ type: ToggleType.Switch, isOn: this.isOn }) .width(60) .height(30) .onChange((isOn) => { this.isOn = isOn; }) } .height('100%') .width('100%') .justifyContent(FlexAlign.Center) }}
复制代码
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
评论