鸿蒙Next开发日记 Day01 - 给控件添加点击效果

今天实现一个给组件添加点击效果的功能。

Column() {
  Image($r('app.media.ic_no_image_16_9'))
    .width("128pv")
    .height("72vp")
    .objectFit(ImageFit.Cover)
    .backgroundColor($r('app.color.background_main'))
    .borderRadius("5vp")
    .margin({bottom: "5vp", top: "50vp"})
  Text("可点击的组件")
    .fontSize("10fp")
    .fontColor($r('app.color.text_main'))
}
.margin({ right: "8vp" })
.alignItems(HorizontalAlign.Start)
.clickEffect({
  scale: 0.9,
  level: ClickEffectLevel.LIGHT
})
.onClick(() => {
  promptAction.showToast({
    message: "已经点击了",
    duration: 3000,
  });
})

关键代码是

.clickEffect({
  scale: 0.9,
  level: ClickEffectLevel.LIGHT
})

其中scale为缩放的程度，为0~1

level为弹簧动效程度

ClickEffectLevel10+

名称 描述 动效参数 默认缩放比

LIGHT 小面积（轻盈） 弹簧动效， 刚性：410，阻尼：38，初始速度：1 90%

MIDDLE 中面积（稳定） 弹簧动效， 刚性：350，阻尼：35，初始速度：0.5 95%

HEAVY 大面积（厚重） 弹簧动效， 刚性：240，阻尼：28，初始速度：0 95%