• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 切换按钮 (Toggle)
2
3
4Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换。具体用法请参考[Toggle](../reference/apis-arkui/arkui-ts/ts-basic-components-toggle.md)。
5
6
7## 创建切换按钮
8
9Toggle通过调用[ToggleOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-toggle.md#toggleoptions18对象说明)来创建，具体调用形式如下：
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-component-general-events.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
112@Entry
113@Component
114struct ToggleExample {
115  @State BOnSt: promptAction.ShowToastOptions = { 'message': 'Bluetooth is on.' };
116  @State BOffSt: promptAction.ShowToastOptions = { 'message': 'Bluetooth is off.' };
117
118  build() {
119    Column() {
120      Row() {
121        Text("Bluetooth Mode")
122          .height(50)
123          .fontSize(16)
124      }
125
126      Row() {
127        Text("Bluetooth")
128          .height(50)
129          .padding({ left: 10 })
130          .fontSize(16)
131          .textAlign(TextAlign.Start)
132          .backgroundColor(0xFFFFFF)
133        Toggle({ type: ToggleType.Switch })
134          .margin({ left: 200, right: 10 })
135          .onChange((isOn: boolean) => {
136            if (isOn) {
137              this.getUIContext().getPromptAction().showToast(this.BOnSt);
138            } else {
139              this.getUIContext().getPromptAction().showToast(this.BOffSt);
140            }
141          })
142      }
143      .backgroundColor(0xFFFFFF)
144    }
145    .padding(10)
146    .backgroundColor(0xDCDCDC)
147    .width('100%')
148    .height('100%')
149  }
150}
151```
152
153
154![zh-cn_image_0000001511740448](figures/zh-cn_image_0000001511740448.gif)
155