鸿蒙(HarmonyOS)应用开发实战——左右拖动切换图片效果案例

最新推荐文章于 2025-02-19 17:24:07 发布

CTrup

最新推荐文章于 2025-02-19 17:24:07 发布

阅读量1k

点赞数 26

CC 4.0 BY-SA版权

分类专栏：移动开发鸿蒙开发 HarmonyOS 文章标签： harmonyos 鸿蒙开发组件化移动开发 ArkUI

本文链接：https://blog.csdn.net/CTrup/article/details/142595983

往期知识点整理

介绍

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

效果图预览

使用说明

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

实现思路

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

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

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

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

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