ArkUI Toggle切换按钮的用法（非常详细）

Toggle 是切换按钮组件，通常用于提供状态按钮样式、勾选框样式和开关样式，主要用于两种状态之间切换。

ArkUI创建切换按钮

Toggle 通过调用接口来创建，接口调用形式如下：

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

其中，ToggleType 为开关类型，包括 Button、Checkbox 和 Switch；isOn 为切换按钮的状态。从 API version 11 开始，Checkbox 的默认样式由圆角方形变为圆形。

切换按钮的创建有以下两种形式：
1) 创建不包含子组件的 Toggle。当 ToggleType 为 Checkbox 或者 Switch 时，创建不包含子组件的 Toggle。例如：

@Entry
@Component
struct ToggleSample {
    build() {
        Row() {
            // 切换按钮，type设置为复选框样式，isOn设置为未选中
            Toggle({ type: ToggleType.Checkbox, isOn: false })
            // 切换按钮，type设置为复选框样式，isOn设置为选中状态
            Toggle({ type: ToggleType.Checkbox, isOn: true })
        }.width('100%').justifyContent(FlexAlign.Center)
    }
}

显示效果如下图所示：


再例如：

@Entry
@Component
struct ToggleSample {
    build() {
        Row() {
            // 通过type将切换按钮设置为开关样式，isOn设置为未选中
            Toggle({ type: ToggleType.Switch, isOn: false })
            // 通过type将切换按钮设置为开关样式，isOn设置为已选中
            Toggle({ type: ToggleType.Switch, isOn: true })
        }.width('100%').justifyContent(FlexAlign.Center)
    }
}

显示效果如下图所示：


2) 创建包含子组件的 Toggle。当 ToggleType 为 Button 时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮上，示例代码如下：

@Entry
@Component
struct ToggleSample {
    build() {
        Row() {
            // 通过type将切换按钮设置为按钮的样式，isOn设置为未选中
            Toggle({ type: ToggleType.Button, isOn: false }) {
                // 切换按钮可以包含子组件，使用Text设置切换按钮显示的文本
                Text('status button').fontColor('#182431').fontSize(12)
            }.width(100)
            // 通过type将切换按钮设置为按钮的样式，isOn设置为已选中
            Toggle({ type: ToggleType.Button, isOn: true }) {
                // 切换按钮可以包含子组件，使用Text设置切换按钮要显示的文本
                Text('status button').fontColor('#182431').fontSize(12)
            }.width(100)
        }.width('100%').justifyContent(FlexAlign.Center)
    }
}

显示效果如下图所示：

ArkUI Toggle自定义样式

1) 通过 selectedColor 属性设置 Toggle 被选中后的背景颜色。示例代码如下：

@Entry
@Component
struct ToggleSample {
    build() {
        Row() {
            // 使用type将切换按钮设置为按钮的样式，isOn设置为已选中
            Toggle({ type: ToggleType.Button, isOn: true }) {
                // 使用Text组件设置要显示的文本及文本样式
                Text('status button').fontColor('#182431').fontSize(12)
            }.width(100).selectedColor(Color.Pink)
            // 将切换按钮设置为复选框样式，isOn设置为已选中
            Toggle({ type: ToggleType.Checkbox, isOn: true })
                // 设置切换按钮选中后的颜色为粉色
                .selectedColor(Color.Pink)
            // 将切换按钮设置为开关的样式，isOn设置为已选中
            Toggle({ type: ToggleType.Switch, isOn: true })
                // 设置选中后的颜色为粉色
                .selectedColor(Color.Pink)
        }.width('100%').justifyContent(FlexAlign.Center)
    }
}

显示效果如下图所示：


2) 通过 switchPointColor 属性设置 Switch 类型的圆形滑块颜色，仅当 type 为 ToggleType.Switch 时有效。示例代码如下：

@Entry
@Component
struct ToggleSample {
    build() {
        Row() {
            // 通过type将切换按钮设置为开关样式，isOn设置为未选中
            Toggle({ type: ToggleType.Switch, isOn: false })
                // 将切换按钮的圆点设置为粉色
                .switchPointColor(Color.Pink)
            // 通过type将切换按钮设置为开关样式，isOn设置为已选中
            Toggle({ type: ToggleType.Switch, isOn: true })
                // 将切换按钮的圆点设置为粉色
                .switchPointColor(Color.Pink)
        }.width('100%').justifyContent(FlexAlign.Center)
    }
}

显示效果如下图所示：

ArkUI Toggle添加事件

Toggle 可用于在被选中和取消选中后触发某些操作，可以绑定 onChange 事件来响应操作的自定义行为。

Toggle({ type: ToggleType.Switch, isOn: false })
    .onChange((isOn: boolean) => {
    if(isOn) {
        // 需要执行的操作
    }
})

ArkUI Toggle应用场景示例

Toggle 用于切换蓝牙开关状态，示例代码如下：

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct ToggleExample {
    // 设置当打开蓝牙后弹窗显示的消息
    @State BOnSt: promptAction.ShowToastOptions = { 'message': 'Bluetooth is on.' }
    // 设置当关闭蓝牙后弹窗显示的消息
    @State BOffSt: promptAction.ShowToastOptions = { 'message': 'Bluetooth is off.' }

    build() {
        Column() {
            Row() {
                Text("Bluetooth Mode").height(50).fontSize(16)
            }
            Row() {
                Text("Bluetooth").height(50).padding({ left: 10 })
                    .fontSize(16).textAlign(TextAlign.Start)
                    .backgroundColor(0xFFFFFF)
                // 切换按钮样式设置为开关样式
                Toggle({ type: ToggleType.Switch })
                .margin({ left: 200, right: 10 })
                // 设置切换按钮状态更改时的事件处理函数
                .onChange((isOn: boolean) => {
                    if (isOn) {
                        // 如果切换按钮状态切换为已选中，则提示蓝牙已打开
                        promptAction.showToast(this.BOnSt)
                    } else {
                        // 如果切换按钮状态切换为未选中，则提示蓝牙已关闭
                        promptAction.showToast(this.BOffSt)
                    }
                })
            }.backgroundColor(0xFFFFFF)
        }.padding(10).backgroundColor(0xDCDCDC).width('100%').height('100%')
    }
}

显示效果如下图所示：