1# 切换按钮 (Toggle)
2
3
4Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换。具体用法请参考[Toggle](../reference/apis-arkui/arkui-ts/ts-basic-components-toggle.md)。
5
6
7## 创建切换按钮
8
9Toggle通过调用接口来创建，接口调用形式如下：
10
11```ts
12Toggle(options: { type: ToggleType, isOn?: boolean })
13```
14
15其中，ToggleType为开关类型，包括Button、Checkbox和Switch，isOn为切换按钮的状态。
16
17API version 11开始，Checkbox默认样式由圆角方形变为圆形。
18
19接口调用有以下两种形式：
20
21
22- 创建不包含子组件的Toggle。
23  当ToggleType为Checkbox或者Switch时，用于创建不包含子组件的Toggle：
24
25
26    ```ts
27  Toggle({ type: ToggleType.Checkbox, isOn: false })
28  Toggle({ type: ToggleType.Checkbox, isOn: true })
29    ```
30
31  ![zh-cn_image_0000001562940485](figures/zh-cn_image_0000001562940485.png)
32
33  ```ts
34  Toggle({ type: ToggleType.Switch, isOn: false })
35  Toggle({ type: ToggleType.Switch, isOn: true })
36  ```
37
38    ![zh-cn_image_0000001511421228](figures/zh-cn_image_0000001511421228.png)
39
40- 创建包含子组件的Toggle。
41  当ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮上。
42
43  ```ts
44  Toggle({ type: ToggleType.Button, isOn: false }) {
45    Text('status button')
46      .fontColor('#182431')
47      .fontSize(12)
48  }.width(100)
49  Toggle({ type: ToggleType.Button, isOn: true }) {
50    Text('status button')
51      .fontColor('#182431')
52      .fontSize(12)
53  }.width(100)
54  ```
55
56    ![zh-cn_image_0000001511900404](figures/zh-cn_image_0000001511900404.png)
57
58
59## 自定义样式
60
61- 通过selectedColor属性设置Toggle打开选中后的背景颜色。
62
63  ```ts
64  Toggle({ type: ToggleType.Button, isOn: true }) {
65    Text('status button')
66    .fontColor('#182431')
67    .fontSize(12)
68  }.width(100).selectedColor(Color.Pink)
69  Toggle({ type: ToggleType.Checkbox, isOn: true })
70    .selectedColor(Color.Pink)
71  Toggle({ type: ToggleType.Switch, isOn: true })
72    .selectedColor(Color.Pink)
73  ```
74
75  ![zh-cn_image_0000001563060657](figures/zh-cn_image_0000001563060657.png)
76
77- 通过switchPointColor属性设置Switch类型的圆形滑块颜色，仅对type为ToggleType.Switch生效。
78
79  ```ts
80  Toggle({ type: ToggleType.Switch, isOn: false })
81    .switchPointColor(Color.Pink)
82  Toggle({ type: ToggleType.Switch, isOn: true })
83    .switchPointColor(Color.Pink)
84  ```
85
86  ![zh-cn_image_0000001511421232](figures/zh-cn_image_0000001511421232.png)
87
88
89## 添加事件
90
91除支持[通用事件](../reference/apis-arkui/arkui-ts/ts-universal-events-click.md)外，Toggle还用于选中和取消选中后触发某些操作，可以绑定onChange事件来响应操作后的自定义行为。
92
93
94```ts
95Toggle({ type: ToggleType.Switch, isOn: false })
96  .onChange((isOn: boolean) => {
97      if(isOn) {
98        // 需要执行的操作
99      }
100  })
101```
102
103
104## 场景示例
105
106Toggle用于切换蓝牙开关状态。
107
108```ts
109// xxx.ets
110import { promptAction } from '@kit.ArkUI';
111@Entry
112@Component
113struct ToggleExample {
114  @State BOnSt:promptAction.ShowToastOptions = {'message': 'Bluetooth is on.'}
115  @State BOffSt:promptAction.ShowToastOptions = {'message': 'Bluetooth is off.'}
116  build() {
117    Column() {
118      Row() {
119        Text("Bluetooth Mode")
120          .height(50)
121          .fontSize(16)
122      }
123      Row() {
124        Text("Bluetooth")
125          .height(50)
126          .padding({left: 10})
127          .fontSize(16)
128          .textAlign(TextAlign.Start)
129          .backgroundColor(0xFFFFFF)
130        Toggle({ type: ToggleType.Switch })
131          .margin({left: 200, right: 10})
132          .onChange((isOn: boolean) => {
133            if(isOn) {
134              promptAction.showToast(this.BOnSt)
135            } else {
136              promptAction.showToast(this.BOffSt)
137            }
138          })
139      }
140      .backgroundColor(0xFFFFFF)
141    }
142    .padding(10)
143    .backgroundColor(0xDCDCDC)
144    .width('100%')
145    .height('100%')
146  }
147}
148```
149
150
151![zh-cn_image_0000001511740448](figures/zh-cn_image_0000001511740448.png)
152