HarmonyOS6 ArkTS Toggle

文章目录组件概述完整代码核心使用与自定义样式讲解1 基础配置状态变量与构造参数1. 状态变量定义2. 构造参数说明2 三种核心类型自定义实现类型1Switch 滑动开关最常用类型2Checkbox 复选框类型3Button 按钮式开关3 通用功能配置1. 状态切换回调onChange2. 禁用态配置enabled核心属性汇总总结组件概述Toggle 是 HarmonyOS 中用于实现二态选择的基础交互组件支持用户在「开启/关闭」「选中/未选中」状态间切换广泛应用于设置页、功能控制、选项选择等场景。该组件原生支持三种核心类型且每种类型均支持高度自定义样式满足不同UI设计需求Switch滑动开关样式适用于功能开启/关闭控制Checkbox复选框样式适用于多选项勾选场景Button按钮式开关样式适用于需文字配合的状态切换。完整代码// ToggleExample.ets Entry Component struct ToggleExample { State isChecked1: boolean false; State isChecked2: boolean true; State isChecked3: boolean false; State isChecked4: boolean false; build() { Column({ space: 25 }) { Text(HarmonyOS Toggle 自定义样式) .fontSize(22) .fontWeight(FontWeight.Bold) .margin({ top: 20 }); // 1. Switch 开关自定义颜色 大小 Text(1. 自定义 Switch 开关).fontSize(16); Toggle({ type: ToggleType.Switch, isOn: this.isChecked1 }) .width(60) // 总宽度 .height(36) // 总高度 .selectedColor(#007DFF) // 选中背景色 .switchPointColor(#FFFFFF) // 开关圆点颜色 .backgroundColor(#CCCCCC) // 未选中背景色 .borderRadius(18) // 整体圆角 .onChange((isOn) { this.isChecked1 isOn; console.log(Switch 状态 isOn); }) // 2. Switch 开关小尺寸 自定义圆点 Text(2. 小尺寸 Switch).fontSize(16); Toggle({ type: ToggleType.Switch, isOn: this.isChecked2 }) .width(40) .height(20) .selectedColor(#00CB87) .backgroundColor(#E0E0E0) .switchPointColor(#FFF) .borderRadius(10) .onChange((isOn) { this.isChecked2 isOn; }) // 3. Checkbox 复选框自定义样式 Text(3. 自定义 Checkbox).fontSize(16); Toggle({ type: ToggleType.Checkbox, isOn: this.isChecked3 }) .width(22) .height(22) .selectedColor(#FF7D00) .borderRadius(4) .onChange((isOn) { this.isChecked3 isOn; }) // 4. 按钮式 Toggle自定义宽高 颜色 Text(4. 按钮式 Toggle).fontSize(16); Toggle({ type: ToggleType.Button, isOn: this.isChecked4 }) { Text(功能开关) .fontSize(14) .fontColor(Color.White) } .width(120) .height(40) .backgroundColor(#CCCCCC) .selectedColor(#9C27B0) .borderRadius(8) .onChange((isOn) { this.isChecked4 isOn; }) // 5. 禁用状态 Toggle Text(5. 禁用 Toggle).fontSize(16); Toggle({ type: ToggleType.Switch, isOn: true }) .width(60) .height(36) .selectedColor(#80BFFF) .backgroundColor(#E0E0E0) .enabled(false) // 禁用 } .width(100%) .padding(20) .backgroundColor(#F5F5F5) } }运行效果如图核心使用与自定义样式讲解1 基础配置状态变量与构造参数1. 状态变量定义使用State装饰器定义布尔型变量用于绑定 Toggle 组件的「选中/未选中」状态实现数据与视图双向同步State isChecked1: boolean false; // 初始未选中 State isChecked2: boolean true; // 初始选中2. 构造参数说明Toggle 组件的核心构造参数为type和isOn用于指定组件类型和初始状态Toggle({ type: ToggleType.xxx, // 组件类型Switch/Checkbox/Button isOn: 状态变量 // 初始状态绑定State变量 })ToggleType.Switch滑动开关类型ToggleType.Checkbox复选框类型ToggleType.Button按钮式开关类型支持插槽自定义内部内容。2 三种核心类型自定义实现类型1Switch 滑动开关最常用适用于功能开启/关闭控制支持整体尺寸、背景色、圆点颜色、圆角全自定义代码中实现了「标准尺寸」和「小尺寸」两种常用样式核心属性width/height设置开关整体宽高建议宽为高的2倍左右符合视觉习惯selectedColor选中开启状态的背景色backgroundColor未选中关闭状态的背景色switchPointColor开关滑动圆点的颜色建议与背景色形成对比borderRadius开关整体圆角建议设为高度的1/2实现胶囊样式。标准尺寸示例Toggle({ type: ToggleType.Switch, isOn: this.isChecked1 }) .width(60) .height(36) .selectedColor(#007DFF) .switchPointColor(#FFFFFF) .backgroundColor(#CCCCCC) .borderRadius(18)类型2Checkbox 复选框适用于单选项/多选项勾选场景建议设置为正方形核心自定义属性width/height复选框宽高建议一致如22*22selectedColor复选框选中状态的填充色同时控制勾选图标颜色borderRadius复选框圆角可设为小值实现方形或大值实现圆形复选框。自定义示例Toggle({ type: ToggleType.Checkbox, isOn: this.isChecked3 }) .width(22) .height(22) .selectedColor(#FF7D00) .borderRadius(4)类型3Button 按钮式开关适用于需要文字/图标配合的状态切换场景支持插槽自定义内部内容核心属性插槽内容可在 Toggle 内部嵌套 Text、Image 等组件实现「文字开关」「图标文字开关」selectedColor按钮选中状态的背景色backgroundColor按钮未选中状态的背景色width/height设置按钮整体宽高适配文字显示。文字按钮示例Toggle({ type: ToggleType.Button, isOn: this.isChecked4 }) { // 插槽自定义内容文字 Text(功能开关) .fontSize(14) .fontColor(Color.White) } .width(120) .height(40) .backgroundColor(#CCCCCC) .selectedColor(#9C27B0) .borderRadius(8)3 通用功能配置1. 状态切换回调onChange所有类型的 Toggle 均支持onChange回调在用户切换组件状态时触发回调参数为当前状态isOn: boolean用于实时同步状态变量和执行业务逻辑如打印日志、触发接口请求.onChange((isOn) { this.isChecked1 isOn; // 同步状态变量 console.log(Switch 状态 isOn); // 执行业务逻辑 })2. 禁用态配置enabled使用enabled(false)可将 Toggle 设为禁用状态此时组件无法被点击切换视觉上呈现灰色调适用于「权限不足」「前置条件未满足」等场景Toggle({ type: ToggleType.Switch, isOn: true }) .enabled(false) // 禁用交互 .selectedColor(#80BFFF) // 禁用态选中色建议设为浅色调 .backgroundColor(#E0E0E0) // 禁用态未选中色核心属性汇总Toggle 组件的自定义样式和功能均通过原生链式属性实现无需自定义布局以下为开发中最常用的核心属性适用于所有/指定类型属性名作用适用类型说明type指定组件类型所有取值ToggleType.Switch/Checkbox/ButtonisOn设置初始状态所有布尔值绑定State变量实现双向同步width/height设置组件宽高所有Switch建议宽为高2倍Checkbox建议宽高一致selectedColor选中状态背景色所有Checkbox同时控制勾选图标颜色backgroundColor未选中状态背景色所有-switchPointColor开关圆点颜色Switch仅滑动开关支持borderRadius设置组件圆角所有Switch建议设为高度1/2Checkbox可设为小值enabled设置启用/禁用所有默认true设为false时禁用交互onChange状态切换回调所有回调参数isOn当前状态总结状态绑定必选建议使用State装饰器绑定isOn属性实现视图与数据的双向同步避免手动维护状态导致的不一致Switch 尺寸规范Switch 组件的宽高建议按「2:1」比例设置如6036、4020并将borderRadius设为高度的1/2符合鸿蒙原生设计规范颜色对比自定义颜色时需保证「选中态」与「未选中态」颜色有明显对比开关圆点颜色与背景色对比清晰提升可识别性禁用态样式禁用态的selectedColor和backgroundColor建议使用浅色调/灰色调与启用态形成视觉区分提示用户该组件不可交互Button 类型插槽Button 类型的 Toggle 内部插槽内容建议控制尺寸避免超出组件宽高导致样式错乱。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力