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/>可通过undefined或者null取消点击回弹效果。<br/>不建议在组件大小动态变化的场景中使用该功能。<br/>当组件无法触发通用事件时，不支持该属性。 | 24 25## ClickEffect对象说明 26 27**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 28 29| 名称 | 参数类型 | 必填 | 描述 | 30| ----- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 31| level | [ClickEffectLevel](ts-appendix-enums.md#clickeffectlevel10) | 是 | 设置当前组件点击回弹效果。<br/>**说明：**<br/>level等于undefined或者null时， ClickEffect采用ClickEffectLevel.LIGHT对应的回弹效果, 缩放比参照scale说明。 | 32| 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/> | 33 34## 示例 35 36```ts 37// xxx.ets 38@Entry 39@Component 40struct ToggleExample { 41 build() { 42 Column({ space: 10 }) { 43 Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') 44 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 45 Toggle({ type: ToggleType.Switch, isOn: false }) 46 .clickEffect({level:ClickEffectLevel.LIGHT}) 47 .selectedColor('#007DFF') 48 .switchPointColor('#FFFFFF') 49 .onChange((isOn: boolean) => { 50 console.info('Component status:' + isOn) 51 }) 52 53 Toggle({ type: ToggleType.Switch, isOn: true }) 54 .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5}) 55 .selectedColor('#007DFF') 56 .switchPointColor('#FFFFFF') 57 .onChange((isOn: boolean) => { 58 console.info('Component status:' + isOn) 59 }) 60 } 61 62 Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') 63 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 64 Toggle({ type: ToggleType.Checkbox, isOn: false }) 65 .clickEffect({level:ClickEffectLevel.MIDDLE}) 66 .size({ width: 20, height: 20 }) 67 .selectedColor('#007DFF') 68 .onChange((isOn: boolean) => { 69 console.info('Component status:' + isOn) 70 }) 71 72 Toggle({ type: ToggleType.Checkbox, isOn: true }) 73 .clickEffect({level:ClickEffectLevel.MIDDLE, scale: 0.5}) 74 .size({ width: 20, height: 20 }) 75 .selectedColor('#007DFF') 76 .onChange((isOn: boolean) => { 77 console.info('Component status:' + isOn) 78 }) 79 } 80 81 Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') 82 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 83 Toggle({ type: ToggleType.Button, isOn: false }) { 84 Text('status button').fontColor('#182431').fontSize(12) 85 }.width(106) 86 .clickEffect({level:ClickEffectLevel.HEAVY}) 87 .selectedColor('rgba(0,125,255,0.20)') 88 .onChange((isOn: boolean) => { 89 console.info('Component status:' + isOn) 90 }) 91 92 Toggle({ type: ToggleType.Button, isOn: true }) { 93 Text('status button').fontColor('#182431').fontSize(12) 94 }.width(106) 95 .clickEffect({level:ClickEffectLevel.HEAVY, scale: 0.5}) 96 .selectedColor('rgba(0,125,255,0.20)') 97 .onChange((isOn: boolean) => { 98 console.info('Component status:' + isOn) 99 }) 100 } 101 }.width('100%').padding(24) 102 } 103} 104``` 105 106
