ArkUI---常用组件---切换按钮 (Toggle)

### 文章目录

[@ $toc$ ](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[创建切换按钮](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[创建不包含子组件的Toggle](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[1.当ToggleType为`Checkbox`](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[2.当ToggleType为`Switch`](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[创建包含子组件的Toggle。](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[3.当ToggleType为`Button`时](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[自定义样式](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[1.通过`selectedColor`属性设置Toggle打开选中后的背景颜色。](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.`Switch`生效。](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[2.添加事件](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[场景示例：Toggle用于切换蓝牙开关状态。](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)
[完整代码：](#文章目录 @[toc] 创建切换按钮创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。 2.添加事件场景示例：Toggle用于切换蓝牙开关状态。完整代码：)

Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换。

创建切换按钮

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

Toggle(options: { type: ToggleType, isOn?: boolean })
ToggleType为开关类型，包括Button、Checkbox 和Switch
isOn: 为切换按钮的状态。

API version 11开始，Checkbox默认样式由圆角方形变为*圆形*。

创建不包含子组件的Toggle

当ToggleType为Checkbox或者Switch时，用于创建不包含子组件的Toggle：

1.当ToggleType为`Checkbox`

typescript 复制代码

	Row(){
      Toggle({type:ToggleType.Checkbox,isOn:false})
      Toggle({type:ToggleType.Checkbox,isOn:true})
    }

2.当ToggleType为`Switch`

typescript 复制代码

	Row(){
       Toggle({type:ToggleType.Switch,isOn:false})
       Toggle({type:ToggleType.Switch,isOn:true})
     }

创建包含子组件的Toggle。

当ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮上。

3.当ToggleType为`Button`时

typescript 复制代码

Row({space:10}){
    Toggle({type:ToggleType.Button, isOn:false}){
      Text('Status button')
        .fontSize(12)
    }

     Toggle({type:ToggleType.Button, isOn:true}){
      Text('Status button')
       .fontSize(12)
    }
   }

自定义样式

1.通过`selectedColor`属性设置Toggle打开选中后的背景颜色。

typescript 复制代码

Row(){
      //Button
       Toggle({ type: ToggleType.Button, isOn: true }) {
         Text('status button')
           .fontSize(12)
       }.width(100)
       .selectedColor(Color.Pink)
       //Checkbox
       Toggle({ type: ToggleType.Checkbox, isOn: true })
         .selectedColor(Color.Pink)
       //Switch
       Toggle({ type: ToggleType.Switch, isOn: true })
         .selectedColor(Color.Pink)
     }

2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.`Switch`生效。

typescript 复制代码

Row(){
       Toggle({ type: ToggleType.Switch, isOn: false })
         .selectedColor(Color.Pink)
       Toggle({ type: ToggleType.Switch, isOn: true })
         .selectedColor(Color.Pink)
     }

2.添加事件

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

typescript 复制代码

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

场景示例：Toggle用于切换蓝牙开关状态。

完整代码：

typescript 复制代码

import { promptAction, PromptAction } from '@kit.ArkUI'

@Entry
@Component
struct Index01 {
  build() {
    Column(){
      Row(){
        Text('蓝牙模式！')
      }.padding(20)
      Row(){
        Text('蓝牙')
        Toggle({type:ToggleType.Switch,isOn:true})
          .onChange((isOn:boolean)=>{
            if (isOn) {
              promptAction.showToast({
                message: '蓝牙已打开！',
                duration:3000
              })
            }else {
              promptAction.showToast({
                message: '蓝牙已关闭！',
                duration:3000
              })
            }

          })
      }.height(40).width('80%').backgroundColor(Color.White).padding(10)
      .justifyContent(FlexAlign.SpaceBetween)
    }.width('100%').height('100%').backgroundColor(Color.Gray)
  }
}

完整代码：

typescript 复制代码

@Entry
@Component
struct Demo1 {
  build() {
   Column(){

    Row(){
      Toggle({type:ToggleType.Checkbox,isOn:false})
      Toggle({type:ToggleType.Checkbox,isOn:true})
    }

     Row(){
       Toggle({type:ToggleType.Switch,isOn:false})
       Toggle({type:ToggleType.Switch,isOn:true})
     }

     Row({space:10}){
      Toggle({type:ToggleType.Button, isOn:false}){
        Text('Status button')
          .fontSize(12)
      }

       Toggle({type:ToggleType.Button, isOn:true}){
        Text('Status button')
         .fontSize(12)
      }
     }

     Row(){
      //Button
       Toggle({ type: ToggleType.Button, isOn: true }) {
         Text('status button')
           .fontSize(12)
       }.width(100)
       .selectedColor(Color.Pink)
       //Checkbox
       Toggle({ type: ToggleType.Checkbox, isOn: true })
         .selectedColor(Color.Pink)
       //Switch
       Toggle({ type: ToggleType.Switch, isOn: true })
         .selectedColor(Color.Pink)
     }

     Row(){
       Toggle({ type: ToggleType.Switch, isOn: false })
         .selectedColor(Color.Pink)
       Toggle({ type: ToggleType.Switch, isOn: true })
         .selectedColor(Color.Pink)
     }

     //Toggle形态1：双态按钮
     Toggle({ type: ToggleType.Button, isOn: true }) {
       Text('开启')
     }.selectedColor(Color.Green)
     .onChange((isOn) => {
       console.log('双态按钮被改变：', isOn)  //打印为true
     })

     //形态2：复选框
     Toggle({ type: ToggleType.Checkbox })
     Text('记住登入信息')

     // 形态3：开关
     Toggle({type:ToggleType.Switch})
   }

  }
}

ArkUI---常用组件---切换按钮 (Toggle)

### 文章目录

创建切换按钮

创建不包含子组件的Toggle

1.当ToggleType为Checkbox

2.当ToggleType为Switch

创建包含子组件的Toggle。

3.当ToggleType为Button时

自定义样式

1.通过selectedColor属性设置Toggle打开选中后的背景颜色。

2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.Switch生效。

2.添加事件

场景示例：Toggle用于切换蓝牙开关状态。

完整代码：

1.当ToggleType为`Checkbox`

2.当ToggleType为`Switch`

3.当ToggleType为`Button`时

1.通过`selectedColor`属性设置Toggle打开选中后的背景颜色。

2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.`Switch`生效。