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