开关

效果

Toggle

就是开关按钮 type 设置为 ToggleType.Switch

注意

1. 参数(两点)

type 就是 ToggleType.Switch isOn 就是开关是否打开 true 就是打开 false 就是关闭

2. 属性(两点)

selectedColor // 开启状态下 滑块的颜色

switchStyle // 自定义滑块样式

3. 事件

onChange // 开关状态改变时触发

子组件

无

参数

type

开关的样式,默认值 ToggleType.Switch

isOn

开关是否打开

true 就是打开 false 就是关闭

默认值 false

属性

selectedColor

开启状态下,滑块的颜色

switchStyle

开关的样式

 .switchStyle({
  // 圆形滑块半径大小
  pointRadius:20,
  // 关闭状态下 Switch开关颜色
  unselectedColor:'blue',
  // 设置圆形滑块颜色
  pointColor:'green',
})

事件

 .onChange((isOn: boolean) => {
    console.info('Component status:' + isOn)
    this.isOn = isOn
    console.log(this.isOn.toString())
})

示例

@Entry
@Component
struct Index {
    @State isOn:boolean = false;
    build() {
      Column(){
          Toggle({ type: ToggleType.Switch, isOn: this.isOn })
              .width(120)
              .height(30)
              // 开启状态下 滑块的颜色
              .selectedColor(Color.Pink)
              // 自定义样式
              .switchStyle({
                  // 圆形滑块半径大小
                  pointRadius:20,
                  // 关闭状态下 Switch开关颜色
                  unselectedColor:'blue',
                  // 设置圆形滑块颜色
                  pointColor:'green',
              })
              .onChange((isOn: boolean) => {
                  console.info('Component status:' + isOn)
                  this.isOn = isOn
                  console.log(this.isOn.toString())
              })
      }
    }
}