介绍

官方API

开关按钮控件，如下图：

接口

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

参数

• type：类型：ToggleType，必填，开关的样式。默认值：ToggleType.Switch

• isOn：类型：boolean，开关是否打开，true：打开，false：关闭。默认值：false。

例子

// 飞行模式
@State feixing:boolean = false;

Row(){
  Text("飞行模式:")

  Toggle({
    type:ToggleType.Switch,
    isOn:$$this.feixing
  })
    .onChange( isOn=>{
      console.log("当前状态：",isOn)
      if(isOn){
        console.log("关闭wifi")
        console.log("关闭手机信号")
        console.log("关闭nfc")
      }else{
        console.log("打开wifi")
        console.log("打开手机信号")
        console.log("打开nfc")
      }
    })
}

Button("获取值")
  .onClick( item=>{
    console.log("飞行模式：",this.feixing)
  })

ToggleType枚举说明

• Switch：提供开关样式。
  通用属性margin默认值为：

  {
    top: '6px',
    right: '14px',
    bottom: '6px',
    left: '14px'
  }。
  

  默认尺寸为:
  {width:’36vp’, height:’20vp’}。

• Checkbox：提供单选框样式。
  通用属性margin的默认值为：

  {
    top: '14px',
    right: '14px',
    bottom: '14px',
    left: '14px'
  }。
  

  默认尺寸为:

  {width:'20vp', height:'20vp'}。
  

• Button：提供状态按钮样式，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。
  默认尺寸为:高为 28vp，宽无默认值。

方法

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

selectedColor(value: ResourceColor)

参数

• color：类型ResourceColor，必填，Switch类型的圆形滑块颜色。默认值：$r('sys.color.ohos_id_color_foreground_contrary')

例子

Toggle(  {
  type: ToggleType.Switch,
  isOn: true
})
  .selectedColor('#21a3cb')

原文出处：/show_1GW3YRnoQO6.html