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