|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 组件提供勾选框样式、状态按钮样式及开关样式。该组件从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
相关推荐
智塑未来18 小时前
鸿蒙游戏体验手册：四种能力从性能到玩法逐一解锁math_hongfan19 小时前
鸿蒙离线数据缓存高级架构：弱网预加载/离线数据优先级/同步冲突解决/上线后数据合并策略math_hongfan1 天前
鸿蒙企业级数据存储高级架构：从读写分离到冷热数据分层/归档策略/数据生命周期管理最佳实践math_hongfan1 天前
鸿蒙存储异常高级排查：文件损坏检测/数据恢复/读写失败重试/磁盘空间预警系统性根治方案lilian2331 天前
Harmony os 技术实战｜拼豆制图10：把取消、解析失败和保存失败写成可恢复状态机2501_919749031 天前
华为鸿蒙美缝剂实用APP—小羊美缝2501_919749031 天前
华为鸿蒙积攒年度高光APP—小羊高光智塑未来1 天前
鸿蒙7碰一碰智感交互——碰哪儿传哪儿math_hongfan1 天前
鸿蒙存储碎片高级清理机制：数据库Vacuum/文件碎片整理/缓存过期清理/主动空间回收策略梦想不只是梦与想1 天前
鸿蒙UI测试框架：UITest