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)

相关推荐
Georgewu6 小时前
【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)
harmonyos
Georgewu6 小时前
【HarmonyOS】Web 组件的 PDF 文档预览功能详解
harmonyos
Chen--Xing7 小时前
第一届OpenHarmonyCTF--Crypto--WriteUp
网络安全·密码学·harmonyos
HarmonyOS_SDK9 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
harmonyos
塞尔维亚大汉10 小时前
鸿蒙内核源码分析(根文件系统) | 先挂到/上的文件系统
源码·harmonyos
别说我什么都不会10 小时前
【OpenHarmony】鸿蒙开发之Checksum
harmonyos
周胡杰12 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶13 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶13 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
万少15 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos