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