1# Toggle 2 3组件提供勾选框样式、状态按钮样式及开关样式。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11仅当ToggleType为Button时可包含子组件。 12 13 14## 接口 15 16Toggle(options: { type: ToggleType, isOn?: boolean }) 17 18从API version 9开始，该接口支持在ArkTS卡片中使用。 19 20**参数:** 21 22| 参数名 | 参数类型 | 必填 | 参数描述 | 23| ---- | ---------- | -----| -------------- | 24| type | [ToggleType](#toggletype枚举说明) | 是 | 开关的样式。 | 25| isOn | boolean | 否 | 开关是否打开，true：打开，false：关闭。<br/>默认值：false | 26 27 28## ToggleType枚举说明 29 30+从API version 9开始，该接口支持在ArkTS卡片中使用。 31 32| 名称 | 描述 | 33| -------- | ---------------- | 34| Checkbox | 提供单选框样式。<br>**说明：**<br/>[通用属性margin](ts-universal-attributes-size.md)的默认值为：<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } | 35| Button | 提供状态按钮样式，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。 | 36| Switch | 提供开关样式。<br>**说明：**<br/>[通用属性margin](ts-universal-attributes-size.md)默认值为：<br>{<br/> top: 14 vp,<br/> right:6 vp,<br/> bottom: 6 vp,<br/> left: 14 vp<br/> } | 37 38## 属性 39 40除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 41 42| 名称 | 参数 | 参数描述 | 43| ---------------- | --------------------------- | ---------------------- | 44| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置组件打开状态的背景颜色。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 45| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | 设置Switch类型的圆形滑块颜色。<br/>> **说明：**<br/>> 仅对type为ToggleType.Switch生效。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 46 47## 事件 48 49除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 50 51| 名称 | 功能描述 | 52| -------- | -------- | 53| onChange(callback: (isOn: boolean) => void) | 开关状态切换时触发该事件。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>isOn为true时，代表状态从关切换为开。isOn为false时，代表状态从开切换为关。 | 54 55 56## 示例 57 58```ts 59// xxx.ets 60@Entry 61@Component 62struct ToggleExample { 63 build() { 64 Column({ space: 10 }) { 65 Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') 66 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 67 Toggle({ type: ToggleType.Switch, isOn: false }) 68 .selectedColor('#007DFF') 69 .switchPointColor('#FFFFFF') 70 .onChange((isOn: boolean) => { 71 console.info('Component status:' + isOn) 72 }) 73 74 Toggle({ type: ToggleType.Switch, isOn: true }) 75 .selectedColor('#007DFF') 76 .switchPointColor('#FFFFFF') 77 .onChange((isOn: boolean) => { 78 console.info('Component status:' + isOn) 79 }) 80 } 81 82 Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') 83 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 84 Toggle({ type: ToggleType.Checkbox, isOn: false }) 85 .size({ width: 20, height: 20 }) 86 .selectedColor('#007DFF') 87 .onChange((isOn: boolean) => { 88 console.info('Component status:' + isOn) 89 }) 90 91 Toggle({ type: ToggleType.Checkbox, isOn: true }) 92 .size({ width: 20, height: 20 }) 93 .selectedColor('#007DFF') 94 .onChange((isOn: boolean) => { 95 console.info('Component status:' + isOn) 96 }) 97 } 98 99 Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') 100 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 101 Toggle({ type: ToggleType.Button, isOn: false }) { 102 Text('status button').fontColor('#182431').fontSize(12) 103 }.width(106) 104 .selectedColor('rgba(0,125,255,0.20)') 105 .onChange((isOn: boolean) => { 106 console.info('Component status:' + isOn) 107 }) 108 109 Toggle({ type: ToggleType.Button, isOn: true }) { 110 Text('status button').fontColor('#182431').fontSize(12) 111 }.width(106) 112 .selectedColor('rgba(0,125,255,0.20)') 113 .onChange((isOn: boolean) => { 114 console.info('Component status:' + isOn) 115 }) 116 } 117 }.width('100%').padding(24) 118 } 119} 120``` 121 122 123
