第九节HarmonyOS 常用基础组件31-Toggle

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、效果图