|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 组件提供勾选框样式、状态按钮样式及开关样式。该组件从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
相关推荐
鸿蒙小灰9 分钟前
鸿蒙开发之仿抖音APP教程：方法论与技术探索CC__xy14 分钟前
04 类型别名type + 检测数据类型(typeof+instanceof) + 空安全+剩余和展开(运算符 ...）简单类型和复杂类型 + 模块化鸿蒙先行者29 分钟前
鸿蒙开发ArkUI框架布局与适配难题丛生之响应式布局实现艰难ajassi20001 小时前
开源 Arkts 鸿蒙应用 开发（十七）通讯--http多文件下载前端世界1 小时前
在鸿蒙里优雅地处理网络错误：从 Demo 到实战案例changsanjiang2 小时前
鸿蒙 音视频边播放边缓存Georgewu6 小时前
【HarmonyOS】应用调用相机功能（扫码，自定义相机，人脸活体检测等）显示黑屏文博知浅6 小时前
时隔4个月，500+star，鸿蒙ArkTS vscode插件1.x已发布🎉完全重构，补全、类型提示、SDK下载管理切换一应俱全，更多新功能正在规划中...Georgewu6 小时前
【HarmonyOS】应用设置全屏和安全区域详解li理7 小时前
鸿蒙Next路由指南：核心API解析与高频问题攻坚