如何实现通过滑动操作让组件消失和重现
==================

#### 问题现象

如何实现通过滑动操作让组件消失和重现的功能，如下图所示：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e3/v3/7jgJ5XVuQTuHXmNa7E8RlQ/zh-cn_image_0000002628392484.png?HW-CC-KV=V1&HW-CC-Date=20260709T133906Z&HW-CC-Expire=86400&HW-CC-Sign=6055F3BA9BDD9EB642AC323ACE756395217D4DC796D664567D4A7F4D7C5F6ED2 "点击放大")

#### 背景知识

*   [PanGesture](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-gestures-pangesture#pangesture15)创建滑动手势对象。
*   [onActionUpdate](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-gestures-pangesture#onactionupdate)设置滑动手势更新回调，[onActionEnd](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-gestures-pangesture#onactionend)设置滑动手势结束回调。
*   [offset](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-location#offset)是HarmonyOS提供的一种相对偏移量，组件相对原本的布局位置进行偏移。和position一起使用时，position生效，offset不生效。

#### 解决方案

1.  为Row组件添加offset属性，参数为offsetX，用于定义组件在X轴上的偏移量。
2.  添加onActionUpdate方法，用于在手势移动过程中实现组件的平滑滚动。
3.  添加onActionEnd方法，在手势移动结束后用于实现组件位置的确定和透明度渐变效果。

完整代码如下所示：

@Entry
@Component
struct TransitionEffectPage {
 _ // 组件往右的偏移量_
  @State offsetX: number = 0;
  @State opacityNum: number = 0;


  build() {
    Column() {
      Row() {
        Column() {
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .width('100%')
        .height(200);


        Row() {
      _    // 图片资源仅作展示，根据实际替换_
          Image($r('app.media.vip\_sn\_star'))
            .width(200)
            .height(200)
            .opacity(this.opacityNum);
        }
        .margin({ top: 24 });
      }
      .offset({ x: this.offsetX })
      .gesture(
    _    // 平移手势，滑动最小距离为5vp时识别成功。_
        PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
      _  // Pan手势移动过程中回调_
          .onActionUpdate((event: GestureEvent) => {
            if (event.offsetX < 0) {
              this.offsetX = event.offsetX;
            } else {
              this.offsetX = -290 + event.offsetX;
            }
          })
          .onActionEnd(() => {
        _    // 控制组件滑出屏幕外_
            if (this.offsetX > -60) {
              this.getUIContext()?.animateTo({
                duration: 300,
              }, () => {
                this.opacityNum = 0;
                this.offsetX = 0;
              });
            }
        _    // 控制组件滑动到中央_
            else {
              this.getUIContext()?.animateTo({
                duration: 300,
              }, () => {
                this.opacityNum = 1;
                this.offsetX = -290;
              });
            }
          })
      );
    }
    .width('100%')
    .height('100%');
  }
}

效果图：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ab/v3/6i6D1SaBR-K77ByKlhFpzw/zh-cn_image_0000002658911703.png?HW-CC-KV=V1&HW-CC-Date=20260709T133906Z&HW-CC-Expire=86400&HW-CC-Sign=E0FEBC6DB38DB3EDA3D2971A18FF097F6BDA13BDD62DD6E9E3A50617B1F89CDD "点击放大")