【HarmonyOS实战开发】鸿蒙左右拖动切换图片效果实现

本文链接：https://blog.youkuaiyun.com/HarmonyOS007/article/details/140958125

介绍

本示例使用滑动手势监听，实时调整左右两侧内容显示区域大小和效果。通过绑定gesture事件中的PanGesture平移手势，实时获取拖动距离。当拖动时，实时地调节左右两个Image组件的宽度，从而成功实现左右拖动切换图片效果的功能。

效果图预览

●更多鸿蒙最新技术知识点，请移步前往小编：https://gitee.com/

使用说明

点击中间按钮进行左右拖动切换图片。

实现思路

本例涉及的关键特性和实现方案如下：

创建三个Stack组件，用来展示装修前后对比图，第一个和第三个Stack分别存放装修前的图片和装修后的图片，zIndex设置为1。第二个Stack存放按钮的图片，zIndex设置为2，这样按钮的图片就会覆盖在两张装修图片之上。

Row() {
  Stack() {...}
  .zIndex(CONFIGURATION.ZINDEX1)
  .width(this.leftImageWidth) // z序设为1，为了使按钮图片浮在装修图片上。

  Stack() {...}
  .width($r('app.integer.drag_button_stack_width'))
  .zIndex(CONFIGURATION.ZINDEX2) // z序设为2，为了使按钮图片浮在装修图片上。

  Stack() {...}
  .zIndex(CONFIGURATION.ZINDEX1) // z序设为1，为了使按钮图片浮在装修图片上。
  .width(this.rightImageWidth)
}
.justifyContent(FlexAlign.Center)
.width($r('app.string.full_size'))

将Image组件放在Row容器里，将Row容器的宽度设置为状态变量，再利用clip属性对于Row容器进行裁剪。

Row() {
  Image($r('app.media.before_decoration'))