3.3、HarmonyOS Next 切换按钮（Toggle）

IT乐手2025-03-18 11:16

Toggle 组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换

创建切换按钮

创建不包含子组件的Toggle

当 ToggleType 为 Checkbox

ts 复制代码

Row() {
	Toggle({ type: ToggleType.Checkbox, isOn: false })
    Toggle({ type: ToggleType.Checkbox, isOn: true })
}.margin({left: 15})

当 ToggleType 为 Switch

ts 复制代码

Row() {
   Toggle({ type: ToggleType.Switch, isOn: false })
   Toggle({ type: ToggleType.Switch, isOn: true })
 }.margin({left: 15})

创建包含子组件的Toggle

ts 复制代码

Row() {
   Toggle({ type: ToggleType.Button, isOn: false }) {
     Text('status button')
       .fontColor('#182431')
       .fontSize(12)
   }.width(100)
   Toggle({ type: ToggleType.Button, isOn: true }) {
     Text('status button')
       .fontColor('#182431')
       .fontSize(12)
   }.width(100)
 }.margin({left: 15})

自定义样式

通过 selectedColor 属性设置 Toggle 打开选中后的背景颜色。

ts 复制代码

Toggle({ type: ToggleType.Button, isOn: true }) {
	Text('status button')
	    .fontColor('#182431')
	    .fontSize(12)
}.width(100).selectedColor(Color.Pink)

Toggle({ type: ToggleType.Checkbox, isOn: true })
  .selectedColor(Color.Pink)
  
Toggle({ type: ToggleType.Switch, isOn: true })
  .selectedColor(Color.Pink)

通过 switchPointColor 属性设置 Switch 类型的圆形滑块颜色，仅对 type 为 ToggleType.Switch 生效。

添加事件

除支持通用事件外，Toggle 通常用于选中和取消选中后触发某些操作，可以绑定 onChange 事件来响应操作后的自定义行为

ts 复制代码

Toggle({ type: ToggleType.Switch, isOn: false })
  .onChange((isOn: boolean) => {
      if(isOn) {
        // 需要执行的操作
      }
})

上一篇 3.2、单选框（Radio）下一篇 3.4、进度条（Progress）