|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 组件提供勾选框样式、状态按钮样式及开关样式。该组件从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
相关推荐
UnicornDev11 小时前
【HarmonyOS 6】空状态页面布局设计互联网散修19 小时前
零基础鸿蒙应用开发第十九节：解锁灵活数据存储新技能Map/Set枫叶丹419 小时前
【HarmonyOS 6.0】ArkData 应用间配置共享：构建跨应用协作新范式互联网散修20 小时前
零基础鸿蒙应用开发第十八节：内置泛型工具类型应用轻口味20 小时前
HarmonyOS 6 自定义人脸识别模型8：MindSpore Lite框架介绍与使用枫叶丹420 小时前
【HarmonyOS 6.0】ArkData 分布式数据对象新特性：资产传输进度监听与接续传输能力深度解析枫叶丹420 小时前
【HarmonyOS 6.0】Agent Framework Kit深度解析：构建应用与智能体的无缝连接亚历克斯神1 天前
Flutter for OpenHarmony: Flutter 三方库 mutex 为鸿蒙异步任务提供可靠的临界资源互斥锁（并发安全基石）钛态1 天前
Flutter 三方库 smartstruct 鸿蒙化字段映射适配指南：介入静态预编译引擎扫除视图及数据模型双向强转类型错乱隐患，筑稳如磐石的企业级模型治理防线-适配鸿蒙 HarmonyOS ohos键盘鼓手苏苏1 天前
Flutter 组件 csv2json 适配鸿蒙 HarmonyOS 实战：高性能异构数据转换，构建 CSV 流式解析与全栈式数据映射架构