|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 组件提供勾选框样式、状态按钮样式及开关样式。该组件从API Version 8开始支持。 仅当ToggleType为Button时可包含子组件。 一、接口 Toggle(options: { type: ToggleType, isOn?: boolean }) 从API version 9开始，该接口支持在ArkTS卡片中使用。 参数: 
ToggleType枚举说明 从API version 9开始，该接口支持在ArkTS卡片中使用。 
二、属性 除支持通用属性外，还支持以下属性： 
三、事件 除支持通用事件外，还支持以下事件： 
四、示例 // xxx.ets @Entry @Component struct ToggleExample { build() { Column({ space: 10 }) { Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Switch, isOn: false }) .selectedColor('#007DFF') .switchPointColor('#FFFFFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) Toggle({ type: ToggleType.Switch, isOn: true }) .selectedColor('#007DFF') .switchPointColor('#FFFFFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) } Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Checkbox, isOn: false }) .size({ width: 20, height: 20 }) .selectedColor('#007DFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) Toggle({ type: ToggleType.Checkbox, isOn: true }) .size({ width: 20, height: 20 }) .selectedColor('#007DFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) } Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Button, isOn: false }) { Text('status button').fontColor('#182431').fontSize(12) }.width(106) .selectedColor('rgba(0,125,255,0.20)') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) Toggle({ type: ToggleType.Button, isOn: true }) { Text('status button').fontColor('#182431').fontSize(12) }.width(106) .selectedColor('rgba(0,125,255,0.20)') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) } }.width('100%').padding(24) } } 
五、场景 在卡片中和单选多选配合使用，可以做出各种选择框的效果。 本文根据HarmonyOS官方文档整理。 |
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Toggle
李洋-蛟龙腾飞公司2023-10-12 12:16
相关推荐
马剑威（威哥爱编程）38 分钟前
【共创稿事节】HarmonyOS 7 文搜图实战：自然语言检索本地图片，全流程端侧闭环李游Leo1 小时前
HarmonyOS 7 HAR + HSP 工程化实战：模块复用、包体积控制与依赖边界昇腾知识体系2 小时前
鲲鹏+昇腾 NUMA 亲和性调优：Kunpeng 920 双路服务器给 NPU 工作负载绑核用户593096009783 小时前
Flutter 鸿蒙化实战：r_upgrade 适配 OpenHarmony，应用升级检查与弹窗youyin3 小时前
HarmonyOS 鸿蒙 ArkTS/ArkUI 装饰器大全轻口味3 小时前
HarmonyOS 7 新特性1：闪控窗——轻规划里的专注倒计时，跟着你走出应用用户593096009784 小时前
Flutter 鸿蒙化实战：record_mp3 适配 OpenHarmony，边录音边出 MP3youyin4 小时前
HarmonyOS ArkTS 与智能融合案例之实时语音翻译应用 实验指导书和代码木子雨廷4 小时前
第 16 天｜网络四态：loading、error、empty、content用户593096009784 小时前
Flutter 鸿蒙化实战：open_app_settings 适配 OpenHarmony，一键跳转系统设置