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