如何实现图片预览 HarmonyOS 鸿蒙Next

如何实现图片预览 HarmonyOS 鸿蒙Next 点击图片，实现图片预览，点击图片周边蒙层后，退出预览，预览图中可对图片进行放大缩小等基础操作。示例代码如下：

@Entry
@Component
struct ImagePreview {
  @State visible: Visibility = Visibility.None;
  @State scaleValue: number = 1;
  @State pinchValue: number = 1;
  @State pinchX: number = 0;
  @State pinchY: number = 0;
  @State count: number = 0;
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;

  build() {
    Stack() {
      Row() {
        Column() {
          Image($r('app.media.startIcon'))
            .width(100)
            .height(100)
            .onClick(() => {
              if (this.visible === Visibility.Visible) {
                this.visible = Visibility.None;
              } else {
                this.visible = Visibility.Visible;
              }
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }
      .height('100%')

      Text('')
        .onClick(() => {
          if (this.visible == Visibility.Visible) {
            this.visible = Visibility.None;
          } else {
            this.visible = Visibility.Visible;
          }
        })
        .width('100%')
        .height('100%')
        .opacity(0.16) // 透明度
        .backgroundColor(0x000000)
        .visibility(this.visible)

      Column() {
        Image($r('app.media.startIcon'))
          .width(300)
          .height(300)
          .draggable(false)
          .visibility(this.visible)
          .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
          .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
          .gesture(
            GestureGroup(GestureMode.Parallel,
              PinchGesture({ fingers: 2 })
                .onActionUpdate((event?: GestureEvent) => {
                  if (event) {
                    this.scaleValue = this.pinchValue * event.scale;
                    this.pinchX = event.pinchCenterX;
                    this.pinchY = event.pinchCenterY;
                  }
                })
                .onActionEnd(() => {
                  this.pinchValue = this.scaleValue;
                }),
              PanGesture()
                .onActionUpdate((event?: GestureEvent) => {
                  if (event) {
                    this.offsetX = this.positionX + event.offsetX;
                    this.offsetY = this.positionY + event.offsetY;
                  }
                })
                .onActionEnd(() => {
                  this.positionX = this.offsetX;
                  this.positionY = this.offsetY;
                })
            )
          )
      }
    }
  }
}

更多关于如何实现图片预览 HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

@Entry @Component struct ImagePreview { @State isPreview: boolean = false @State scaleValue: number = 1 @State scaleStart: number = 1 @State offsetX: number = 0 @State offsetY: number = 0

build() { Column() { Image($r(‘app.media.example’)) .width(200) .height(200) .onClick(() => { this.isPreview = true }) } .width(‘100%’) .height(‘100%’)

if (this.isPreview) {
  Stack() {
    // 蒙层
    Rect()
      .width('100%')
      .height('100%')
      .fill('#CC000000')
      .onClick(() => {
        this.isPreview = false
        this.scaleValue = 1
      })

    // 预览图片
    Image($r('app.media.example'))
      .width('80%')
      .height('80%')
      .scale({ x: this.scaleValue, y: this.scaleValue })
      .translate({ x: this.offsetX, y: this.offsetY })
      .gesture(
        GestureGroup(
          GestureMode.Sequence,
          PinchGesture()
            .onActionStart(() => {
              this.scaleStart = this.scaleValue
            })
            .onActionUpdate((event: PinchGestureEvent) => {
              this.scaleValue = Math.min(Math.max(this.scaleStart * event.scale, 0.5), 3)
            })
            .onActionEnd(() => {
              this.scaleStart = this.scaleValue
            })
        )
      )
      .onClick((event: ClickEvent) => {
        event.stopPropagation()
      })
  }
}

} }

更多关于如何实现图片预览 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，实现图片预览可以通过使用Image组件和PageSlider组件结合来实现。首先，使用Image组件加载图片资源，然后通过PageSlider组件实现图片的滑动预览效果。

  1. Image组件：Image组件用于显示图片，可以通过设置src属性来指定图片资源。例如：

    Image($r('app.media.image1'))
    .width(200)
    .height(200)

  2. PageSlider组件：PageSlider组件用于实现页面的滑动效果，可以将多个Image组件放入PageSlider中，实现图片的滑动预览。例如：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct ImagePreview {
    build() {
        PageSlider() {
            Image($r('app.media.image1'))
                .width(200)
                .height(200)
            Image($r('app.media.image2'))
                .width(200)
                .height(200)
            Image($r('app.media.image3'))
                .width(200)
                .height(200)
        }
    }
}

  3. 手势支持：为了增强用户体验，可以通过Gesture组件为Image添加手势支持，实现放大、缩小等操作。例如：

    Image($r('app.media.image1'))
    .width(200)
    .height(200)
    .gesture(
        GestureGroup()
            .onPinch(() => {
                // 处理放大缩小手势
            })
    )
回到顶部