HarmonyOS 鸿蒙Next应用开发：实现图片大小拖拽调整功能 在很多鸿蒙应用场景中，我们需要让用户能够自由调整图片的大小，以获得更好的视觉体验。本文将介绍如何通过鸿蒙 ArkUI 框架实现图片大小的拖拽调整功能，支持边界限制，确保图片大小在合理范围内。

功能实现思路

本功能主要通过以下几个关键点实现：

• 获取屏幕尺寸，确定图片最大可调整范围
• 使用 RelativeContainer 进行相对布局，放置图片和控制按钮
• 给控制按钮添加拖拽手势，实时更新图片尺寸
• 实现尺寸边界限制，防止图片过大或过小

具体实现步骤

1. 引入必要模块并定义基础变量

首先需要引入 display 模块用于获取屏幕信息，同时定义相关变量存储屏幕尺寸、图片尺寸及缓存值：

import { display } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  readonly TABS_HEIGHT = 200
  // 屏幕尺寸
  private displayWidth: number = 0;
  private displayHeight: number = 0;
  /**
   * 宽度本地缓存
   */
  private widthCache: number = 0;
  /**
   * 高度本地缓存
   */
  private heightCache: number = 0;
  /**
   * 节点定位本地缓存
   */
  @State widthSize: number = 0;
  @State heightSize: number = 0;

2. 初始化组件尺寸

在组件即将出现时（aboutToAppear 生命周期），获取屏幕尺寸并初始化图片的初始大小：

aboutToAppear(): void {
  const displayData = display.getDefaultDisplaySync();
  // 计算可用尺寸，减去边距
  this.displayWidth = px2vp(displayData.width) - 40;
  this.displayHeight = px2vp(displayData.height) - 40;
  // 初始化图片尺寸
  this.widthSize = this.displayWidth
  this.widthCache = this.displayWidth
  this.heightCache = this.TABS_HEIGHT
  this.heightSize = this.TABS_HEIGHT
}

3. 构建 UI 布局

使用 Column 和 RelativeContainer 构建基础布局，放置需要调整大小的图片和拖拽控制按钮：

Column(){
  RelativeContainer() {
    // 主图片
    Image($r('app.media.icon_opacity'))
      .border({ width:  2, color: '#ff1d4fcd' })
      .width(this.widthSize)
      .height(this.heightSize)
    // 拖拽控制按钮
    Image($r('app.media.fangda'))
      .width(20)
      .height(20)
      .objectFit(ImageFit.Cover)
      .backgroundColor(Color.Yellow)
      .borderRadius(10)
      .alignRules(
        {
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        }
      )
      .translate({ x: '50%', y: '50%' })
     
  }.width(this.widthSize)
  .height(this.heightSize)
  .position({x:0,y:0})
  .margin({left:20,right:20})
}.width('100%')
.height('100%')

4. 实现拖拽调整功能

给控制按钮添加 PanGesture 手势，在拖拽过程中实时更新图片尺寸，并添加边界限制：

.gesture(
  PanGesture({ direction: PanDirection.All })
    .onActionUpdate((event: GestureEvent) => {
      // 宽度边界限制
      if (this.widthCache + event.offsetX > this.displayWidth) {
        this.widthSize = this.displayWidth
      } else {
        if (this.widthCache + event.offsetX < 100) {
          this.widthSize = 100
        } else {
          this.widthSize = this.widthCache + event.offsetX
        }
      }
      // 高度边界限制
      if (this.heightCache + event.offsetY > this.displayHeight) {
        this.heightSize = this.displayHeight
      } else {
        if (this.heightCache + event.offsetY < 100) {
          this.heightSize = 100
        } else {
          this.heightSize = this.heightCache + event.offsetY
        }
      }
    })
    .onActionEnd(() => {
      // 拖拽结束后更新缓存值
      this.widthCache = this.widthSize
      this.heightCache = this.heightSize
    })
)

完整代码

import { display } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  readonly TABS_HEIGHT = 200
  // 屏幕尺寸
  private displayWidth: number = 0;
  private displayHeight: number = 0;
  /**
   * 宽度本地缓存
   */
  private widthCache: number = 0;
  /**
   * 高度本地缓存
   */
  private heightCache: number = 0;
  /**
   * 节点定位本地缓存
   */
  @State widthSize: number = 0;
  @State heightSize: number = 0;

  aboutToAppear(): void {
    const displayData = display.getDefaultDisplaySync();
    // 计算可用尺寸，减去边距
    this.displayWidth = px2vp(displayData.width) - 40;
    this.displayHeight = px2vp(displayData.height) - 40;
    // 初始化图片尺寸
    this.widthSize = this.displayWidth
    this.widthCache = this.displayWidth
    this.heightCache = this.TABS_HEIGHT
    this.heightSize = this.TABS_HEIGHT
  }

  build() {
    Column(){
      RelativeContainer() {
        // 主图片
        Image($r('app.media.icon_opacity'))
          .border({ width:  2, color: '#ff1d4fcd' })
          .width(this.widthSize)
          .height(this.heightSize)
        // 拖拽控制按钮
        Image($r('app.media.fangda'))
          .width(20)
          .height(20)
          .objectFit(ImageFit.Cover)
          .backgroundColor(Color.Yellow)
          .borderRadius(10)
          .alignRules(
            {
              bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
              right: { anchor: "__container__", align: HorizontalAlign.End }
            }
          )
          .translate({ x: '50%', y: '50%' })
          .gesture(
            PanGesture({ direction: PanDirection.All })
              .onActionUpdate((event: GestureEvent) => {
                // 宽度边界限制
                if (this.widthCache + event.offsetX > this.displayWidth) {
                  this.widthSize = this.displayWidth
                } else {
                  if (this.widthCache + event.offsetX < 100) {
                    this.widthSize = 100
                  } else {
                    this.widthSize = this.widthCache + event.offsetX
                  }
                }
                // 高度边界限制
                if (this.heightCache + event.offsetY > this.displayHeight) {
                  this.heightSize = this.displayHeight
                } else {
                  if (this.heightCache + event.offsetY < 100) {
                    this.heightSize = 100
                  } else {
                    this.heightSize = this.heightCache + event.offsetY
                  }
                }
              })
              .onActionEnd(() => {
                // 拖拽结束后更新缓存值
                this.widthCache = this.widthSize
                this.heightCache = this.heightSize
              })
          )
      }.width(this.widthSize)
      .height(this.heightSize)
      .position({x:0,y:0})
      .margin({left:20,right:20})
    }.width('100%')
    .height('100%')
  }
}

功能效果展示

• 初始状态下，图片将按照屏幕宽度和预设高度显示
• 拖动右下角的黄色控制按钮，可以实时调整图片的宽度和高度
• 图片宽度最小为 100px，最大不超过屏幕宽度（减去边距）
• 图片高度最小为 100px，最大不超过屏幕高度（减去边距）
• 拖拽结束后，图片将保持最终调整的尺寸

总结

通过本文介绍的方法，我们实现了一个简单但实用的图片大小拖拽调整功能。核心在于利用鸿蒙 ArkUI 框架提供的手势系统和布局组件，结合状态管理实现实时更新。这种交互方式可以应用在图片查看器、编辑器等多种场景中，提升用户体验。

如果需要进一步优化，可以考虑添加比例锁定功能，保持图片的宽高比；或者添加双击重置功能，让用户可以快速恢复默认尺寸。