1、描述

组件提供勾选框样式、状态栏样式以及开关样式。

2、子组件

仅当ToggleType为Button时可包含子组件。

3、接口

Toggle(options: { type: ToggleType , isOn?: boolean})

4、参数

参数名	参数类型	必填	描述
type	ToggleType	是	开关的样式。
isOn	boolean	否	开关是否打开，开是true，关是false。默认值：false。

5、ToggleType枚举说明

名称	描述
Checkbox	提供单选框样式。说明：通用属性margin的默认值为{top:12vp, right: 12vp, bottom: 12vp, left: 12vp}。
Button	提供状态按钮样式。如果子组件有文本设置，则相应的文本内容会显示在按钮内部。
Switch	提供开关样式。说明：通用属性margin的默认值为{top:14vp, right: 6vp, bottom: 6vp, left: 14vp}。

6、属性

名称	参数	描述
selectedColor	ResourceColor	设置组件打开状态的背景颜色。
switchPointColor	ResourceColor	设置switch类型的圆形滑块的颜色。说明：仅对type为ToggleType.Switch生效。

7、事件

名称：onChange(callback:(isOn:boolean) => void)

功能描述：开关状态切换时触发该事件。说明：isOn为true时，代表状态从关切换为开。isOn为false时，代表状态从开切换为关。

8、示例

import router from '@ohos.router'@Entry
@Component
struct TogglePage {@State message: string = '组件提供勾选框样式、状态按钮样式及开关样式。'build() {Row() {Scroll() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width("96%")Blank(12)Row() {Toggle({ type: ToggleType.Checkbox }).width(30)Toggle({ type: ToggleType.Checkbox, isOn: true }).width(30).onChange((isOn: boolean) => {console.log("zhangDM", "Toggle type为ToggleType.Checkbox isOn = " + isOn)})Toggle({ type: ToggleType.Checkbox, isOn: true }).width(30).selectedColor(Color.Green)}Blank(12)Row() {Toggle({ type: ToggleType.Switch })Toggle({ type: ToggleType.Switch }).width(80).height(50).backgroundColor(Color.Yellow)Toggle({ type: ToggleType.Switch }).width(80).height(60).selectedColor(Color.Green).switchPointColor(Color.Red)Toggle({ type: ToggleType.Switch, isOn: true }).width(80).height(60).selectedColor(Color.Green).switchPointColor(Color.Red)}Blank(12)Row() {Toggle({ type: ToggleType.Button }) {Text("haha").fontSize(22).fontColor(Color.White)}.width(120).height(40).selectedColor(Color.Green)Blank(20)Toggle({ type: ToggleType.Button, isOn: true }) {Text("haha").fontSize(22).fontColor(Color.White)}.width(120).height(40).selectedColor(Color.Green).onChange((isOn: boolean) => {console.log("zhangDM", "Toggle type为ToggleType.Button isOn = " + isOn)})}Blank(12)Button("Toggle文本文档").fontSize(20).backgroundColor('#007DFF').width('96%').onClick(() => {// 处理点击事件逻辑router.pushUrl({url: "pages/baseComponent/toggle/ToggleDesc",})})}.width('100%')}}.padding({ top: 12, bottom: 12 })}
}

9、效果图