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