67.Harmonyos NEXT 图片预览组件之性能优化策略

export class CommonLazyDataSourceModel<T> extends BasicDataSource<T> {
  private dataArray: T[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): T {
    return this.dataArray[index];
  }

  public clearAndPushAll(data: T[]): void {
    this.dataArray = [];
    this.dataArray.push(...data);
    this.notifyDataReload();
  }
}

List({ scroller: this.listScroll, space: this.listSpace }) {
    LazyForEach(this.lazyImageList, (imageUrl: string, index: number) => {
        ListItem() {
            PicturePreviewImage({
                imageUrl: imageUrl,
                // 其他参数...
            })
        }
        .width("100%")
    })
}

.cachedCount(1)

this.matrix = matrix4.identity().scale({
    x: this.imageScaleInfo.scaleValue,
    y: this.imageScaleInfo.scaleValue,
}).rotate({
    x: 0,
    y: 0,
    z: 1,
    angle: this.imageRotateInfo.currentRotate,
}).copy();

calcImageDefaultSize(imageWHRatio: number, windowSize: window.Size): image.Size {
    let width = 0
    let height = 0;
    if (imageWHRatio > windowSize.width / windowSize.height) {
        // 图片宽高比大于屏幕宽高比，图片默认以屏幕宽度进行显示
        width = windowSize.width;
        height = windowSize.width / imageWHRatio;
    } else {
        height = windowSize.height;
        width = windowSize.height * imageWHRatio;
    }
    return { width: width, height: height };
}

Image(this.imageUrl)
    .width(this.imageWH === ImageFitType.TYPE_WIDTH ? $r("app.string.imageviewer_image_default_width") : undefined)
    .height(this.imageWH === ImageFitType.TYPE_HEIGHT ? $r("app.string.imageviewer_image_default_height") : undefined)
    .aspectRatio(this.imageWHRatio)
    .objectFit(ImageFit.Cover)
    .autoResize(false)
    .transform(this.matrix)
    .offset({
        x: this.imageOffsetInfo.currentX,
        y: this.imageOffsetInfo.currentY
    })

resetCurrentImageInfo(): void {
    animateTo({
        duration: this.restImageAnimation
    }, () => {
        this.imageScaleInfo.reset();
        this.imageOffsetInfo.reset();
        this.imageRotateInfo.reset();
        this.matrix = matrix4.identity().copy();
    })
}

.onComplete((event: ImageLoadResult) => {
    if (event) {
        this.initCurrentImageInfo(event)
    }
})

PanGesture({ fingers: 1 })
    .onActionUpdate((event: GestureEvent) => {
        if (this.imageWH != ImageFitType.TYPE_DEFAULT) {
            if (this.eventOffsetX != event.offsetX || event.offsetY != this.eventOffsetY) {
                this.eventOffsetX = event.offsetX;
                this.eventOffsetY = event.offsetY;
                this.setCrossAxis(event);
                this.setPrincipalAxis(event);
            }
        }
    })

export function runWithAnimation(fn: Function, duration: number = 300) {
    animateTo({
        duration: duration,
        curve: Curve.Ease,
        iterations: 1,
        playMode: PlayMode.Normal,
    }, fn);
}