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