1# 点击回弹效果 2 3设置组件点击时回弹效果。 4 5> **说明：** 6> 7> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12| 名称 | 参数类型 | 描述 | 13| ----------- | ------------------------------------------- | ------------------------------------------------------------ | 14| clickEffect | [ClickEffect](#clickeffect对象说明) \| null | 设置当前组件点击回弹效果。<br/>**说明：**<br/>可通过undefined或者null取消点击回弹效果。<br/>不建议在组件大小动态变化的场景中使用该功能。<br/>当组件无法触发通用事件时，不支持该属性。 | 15 16## ClickEffect对象说明 17 18| 名称 | 参数类型 | 必填 | 描述 | 19| ----- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 20| level | [ClickEffectLevel](ts-appendix-enums.md#clickeffectlevel10) | 是 | 设置当前组件点击回弹效果。<br/>**说明：**<br/>level等于undefined或者null时， ClickEffect采用ClickEffectLevel.LIGHT对应的回弹效果, 缩放比参照scale说明。 | 21| scale | number | 否 | 回弹缩放比例，支持在设置ClickEffectLevel的基础上微调回弹缩放比例。<br/>**说明：**<br/>level等于ClickEffectLevel.LIGHT时，默认值：0.90<br/>level等于ClickEffectLevel.MIDDLE或者ClickEffectLevel.HEAVY时，默认值：0.95<br/>level等于undefined或者null时，level为ClickEffectLevel.LIGHT，默认值：0.90<br/>scale等于undefined或者null时，scale与当前设置的level对应的默认缩放比相同。<br/> | 22 23## 示例 24 25```ts 26// xxx.ets 27@Entry 28@Component 29struct ToggleExample { 30 build() { 31 Column({ space: 10 }) { 32 Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') 33 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 34 Toggle({ type: ToggleType.Switch, isOn: false }) 35 .clickEffect({level:ClickEffectLevel.LIGHT}) 36 .selectedColor('#007DFF') 37 .switchPointColor('#FFFFFF') 38 .onChange((isOn: boolean) => { 39 console.info('Component status:' + isOn) 40 }) 41 42 Toggle({ type: ToggleType.Switch, isOn: true }) 43 .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5}) 44 .selectedColor('#007DFF') 45 .switchPointColor('#FFFFFF') 46 .onChange((isOn: boolean) => { 47 console.info('Component status:' + isOn) 48 }) 49 } 50 51 Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') 52 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 53 Toggle({ type: ToggleType.Checkbox, isOn: false }) 54 .clickEffect({level:ClickEffectLevel.MIDDLE}) 55 .size({ width: 20, height: 20 }) 56 .selectedColor('#007DFF') 57 .onChange((isOn: boolean) => { 58 console.info('Component status:' + isOn) 59 }) 60 61 Toggle({ type: ToggleType.Checkbox, isOn: true }) 62 .clickEffect({level:ClickEffectLevel.MIDDLE, scale: 0.5}) 63 .size({ width: 20, height: 20 }) 64 .selectedColor('#007DFF') 65 .onChange((isOn: boolean) => { 66 console.info('Component status:' + isOn) 67 }) 68 } 69 70 Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') 71 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 72 Toggle({ type: ToggleType.Button, isOn: false }) { 73 Text('status button').fontColor('#182431').fontSize(12) 74 }.width(106) 75 .clickEffect({level:ClickEffectLevel.HEAVY}) 76 .selectedColor('rgba(0,125,255,0.20)') 77 .onChange((isOn: boolean) => { 78 console.info('Component status:' + isOn) 79 }) 80 81 Toggle({ type: ToggleType.Button, isOn: true }) { 82 Text('status button').fontColor('#182431').fontSize(12) 83 }.width(106) 84 .clickEffect({level:ClickEffectLevel.HEAVY, scale: 0.5}) 85 .selectedColor('rgba(0,125,255,0.20)') 86 .onChange((isOn: boolean) => { 87 console.info('Component status:' + isOn) 88 }) 89 } 90 }.width('100%').padding(24) 91 } 92} 93``` 94 95
