3.3、HarmonyOS Next 切换按钮(Toggle)

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

创建切换按钮

创建不包含子组件的Toggle

ToggleTypeCheckbox

ts 复制代码
Row() {
	Toggle({ type: ToggleType.Checkbox, isOn: false })
    Toggle({ type: ToggleType.Checkbox, isOn: true })
}.margin({left: 15})

ToggleTypeSwitch

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 类型的圆形滑块颜色,仅对 typeToggleType.Switch 生效。

添加事件

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

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

上一篇 3.2、单选框(Radio) 下一篇 3.4、进度条(Progress)

相关推荐
万少3 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
coder_pig14 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶14 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
前端世界16 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor17 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
zhanshuo18 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore18 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
zhanshuo18 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
HarmonyOS小助手18 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
xq952719 小时前
flutter 鸿蒙化插件开发横空出世
harmonyos