OpenHarmony实战开发-如何实现组件被点击后样式的动态变化

场景说明

用户在使用应用时，可通过点击、滑动、按压等方式与应用进行交互，例如通过点击选中文件、跳转页面、开关其他组件。而用户在完成点击操作时，组件样式不改变，用户可能无法确定是否点击，或无法确定实际点击的是哪个组件。因此需要在用户进行点击操作时对组件被点击组件的样式进行变化，提升用户的交互感知。

本案例将通过，点击回弹效果、触摸事件、多态样式的方式实现对图片进行点击后改变图片大小，实现用户交互感知的提升。

效果呈现

本例最终效果图如下：

环境要求

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 4.0 Release
• SDK: Ohos_sdk_public 4.0.10.13 (APIVersion 10 Release)

实现思路

本例的包含的关键操作及其实现方案如下：

• 通过组件通用属性中的点击回弹效果属性实现。
• 通过通用事件中的触摸事件实现。在用户手指按下时，将Image组件的宽度值变小，用户手指抬起时，将Image组件的宽度恢复到初始值。此外通过对组件添加属性动画，可实现渐变过渡效果，提升用户体验。
• 通过UI范式中的多态样式来实现。在多态样式中，可根据组件的状态来设置不同样式。在按压态下，设置Image组件的width属性值为180，在正常态下设置组件的width属性值为200。此外通过对组件添加属性动画，可实现渐变过渡效果，提升用户体验。

开发步骤

本例详细开发步骤如下，开发步骤中仅展示相关步骤代码，全量代码请参考完整代码章节的内容：

• 通过组件通用属性中的点击回弹效果属性实现：

该方法是组件的通用属性，组件设置该属性后，点击组件会有先缩小再恢复到初始大小的效果，可通过属性中参数设置缩放比例。

示例代码如下：

Image($r('app.media.ic_preview'))
  .width(200)
  .margin({
    top: 5, bottom: 5 })
  .clickEffect({
    level: ClickEffectLevel.LIGHT, scale: 0.8 })

• 通用事件中的触摸事件实现：

当用户手指在组件上按下、滑动、抬起时，会触发触发触摸事件onTouch。根据事件返回的TouchEvent对象，可以确定返回触摸事件的类型，触摸手指位置相关信息等（详情查询参考中官方文档），开发者可通过不同的触摸类型，对组件属性中的参数值进行修改，以达到组件UI样式发生变化的效果。此外还可以在不同触摸类型中，调用不同的能力接口，如在抬起时，发起路由跳转。

本文中主要介绍如何在通过触摸事件改变图片大小，实现类似点击回弹的效果。因此最终实现是通过在用户在组件上按下时，改小组件的尺寸；抬起时，使得尺寸恢复到初始大小。但是如果直接改变组件尺寸大小后，组件尺寸会直接变化，用户体验不好。可通过设置组件的属性动画animation，使得组件的尺寸变化时有过渡动画效果。

示例代码如下：

Image($r('app.media.ic_preview'))
  .width(this.widthNumber)
  .animation({
    duration: 300, curve: Curve.Ease })
  .renderFit(RenderFit.TOP_LEFT)
  .margin({
    top: 5, bottom: 5 })
  .onTouch((event?: TouchEvent) => {
   
    if (event) {
   
      if (event.type === TouchType.Down) {