Toggle

About 4 min

Toggle

说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

权限列表

子组件

接口

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

  • 参数

    参数名

    参数类型

    必填

    默认值

    参数描述

    type

    ToggleType

    -

    创建相应的开关状态组件。

    isOn

    boolean

    false

    设置开关状态组件初始化状态。

    说明:

    在创建组件时不设置isOn,组件复用时可保持选中状态;如设置isOn初始值,则需要在通过事件方法记录选中状态已达到组件复用时保持选中状态。

  • ToggleType枚举说明

    名称

    描述

    Checkbox

    提供单选框样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。

    Button

    提供状态按钮样式,如果有文本设置,则相应的文本内容会显示在按钮内部。

    Switch

    提供开关样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。

属性

名称

参数

默认值

参数描述

selectedColor

Color

-

设置组件打开状态的背景颜色。

switchPointColor

Color

-

设置Switch类型的圆形滑块颜色。

说明:

仅对type为ToggleType.Switch生效。

事件

名称

功能描述

onChange(callback: (isOn: boolean) => void)

开关状态切换时触发该事件。

示例

@Entry
@Component
struct ToggleExample {
  build() {
    Column({ space: 10 }) {
      Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Switch, isOn: false })
          .selectedColor(0xed6f21)
          .switchPointColor(0xe5ffffff)
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Switch, isOn: true })
          .selectedColor(0x39a2db)
          .switchPointColor(0xe5ffffff)
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Checkbox, isOn: false })
          .size({ width: 28, height: 28 })
          .selectedColor(0xed6f21)
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Checkbox, isOn: true })
          .size({ width: 28, height: 28 })
          .selectedColor(0x39a2db)
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Button, isOn: false }) {
          Text('status button').padding({ left: 12, right: 12 })
        }
        .selectedColor(0xed6f21)
        .onChange((isOn: boolean) => {
          console.info('Component status:' + isOn)
        })

        Toggle({ type: ToggleType.Button, isOn: true }) {
          Text('status button').padding({ left: 12, right: 12 })
        }
        .selectedColor(0x39a2db)
        .onChange((isOn: boolean) => {
          console.info('Component status:' + isOn)
        })
      }
    }.width('100%').padding(24)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60