Pull-up/Pull-down Actions, Image Preview, Component Margins, this Reference, SVG Rotation

[Daily HarmonyOS Next Knowledge] Pull-up/Pull-down Actions, Image Preview, Component Margins, this Reference, SVG Rotation

1. How to implement pull-up refresh in HarmonyOS, including API calls and animation (pull-down refresh is similar)?

Refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-refresh-V5

The Refresh component is a container that supports pull-down operations and displays refresh animations.

2. How to implement image preview in HarmonyOS?

It is recommended to use the Image component, which supports rendering local and network images. Refer to: https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/imageviewer

Image preview features:

1. Pinch with two fingers to zoom.
2. Double-tap to toggle between zoomed and default states.
3. Slide to view different parts of the image in zoomed mode.

Implementation approach:

1. Use matrix for zooming:

@State matrix: matrix4.Matrix4Transit = matrix4.identity().copy();
Image(this.imagePixelMap)
    .transform(this.matrix)

1. Use offset for positioning:

@State imageOffsetInfo: OffsetModel = new OffsetModel(0, 0);
Image(this.imagePixelMap)
    .offset({
        x: this.imageOffsetInfo.currentX,
        y: this.imageOffsetInfo.currentY
    })

1. Set objectFit to Cover to maintain aspect ratio and allow overflow:

Image(this.imagePixelMap)
    .objectFit(ImageFit.Cover)

1. Precompute image info and set default size with width/height and aspectRatio:

initCurrentImageInfo(): void {
    this.matrix = matrix4.identity().copy();
    const imageSource: image.ImageSource = image.createImageSource(this.imageUri);
    imageSource.getImageInfo(0).then((data: image.ImageInfo) => {
        this.imageWHRatio = data.size.width / data.size.height;
        this.imageDefaultSize = this.calcImageDefaultSize(this.imageWHRatio, windowSizeManager.get());
        if (this.imageDefaultSize.width === windowSizeManager.get().width) {
            this.fitWH = "width";
        } else {
            this.fitWH = "height";
        }
        this.imageScaleInfo.maxScaleValue += this.fitWH === "width" ? 
            (windowSizeManager.get().height / this.imageDefaultSize.height) : 
            (windowSizeManager.get().width / this.imageDefaultSize.width);
    }).catch((err: BusinessError) => {
        console.error(`[error][getImageInfo]${err.message}`);
    });
    imageSource.createPixelMap().then((data: image.PixelMap) => {
        this.imagePixelMap = data;
    }).catch((err: BusinessError) => {
        console.error(`[error][createPixelMap]${err.message}`);
    });
}

Image(this.imagePixelMap)
    .width(this.fitWH === "width" ? $r("app.string.image_default_width") : undefined)
    .height(this.fitWH === "height" ? $r("app.string.image_default_height") : undefined)
    .aspectRatio(this.imageWHRatio)

3. How to get the padding value of a component in HarmonyOS?

Reference demo:

const TEST_TAG: string = "FrameNode"
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('我的测试')
        .key('text')
        .padding({
          top: '10vp',
          right: '20vp',
          bottom: '30vp',
          left: '40vp'
        })

      Button('获取padding')
        .onClick(() => {
          let frameNode = this.getUIContext().getFrameNodeById('text')
          let userConfigPadding = frameNode?.getUserConfigPadding();
          console.log(TEST_TAG + JSON.stringify(userConfigPadding));
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

4. Can't get this in HarmonyOS LiveEventBus?

Reference demo:

import { LiveEventBus } from '@ohos/liveeventbus';
import { MState } from '@ohos/liveeventbus';
import { Lifecycle } from '@ohos/liveeventbus';

const KEY_TEST_CLOSE_ALL_PAGE = "key_test_close_all_page";

@Entry({ routeName: "EditorPage" })
@Component
export struct EditorPage {
  @State message: string = 'Hello World';
  private mLifecycle?: Lifecycle;

  getLifecycle(): Lifecycle {
    if (this.mLifecycle) {
      return this.mLifecycle
    }
    return new Lifecycle(MState.STARTED)
  }

  aboutToAppear() {
    // Create lifecycle-aware object
    this.mLifecycle = new Lifecycle(MState.STARTED)
    // Subscribe to messages
    LiveEventBus
      .get<boolean>(KEY_TEST_CLOSE_ALL_PAGE)
      .observe(this, {
        onChanged: (b: boolean) => {
          this.message
        }
      });
  }

  build() {
    Column() {
    }
    .width('100%')
    .height('100%')
  }
}

5. How to rotate an SVG icon in HarmonyOS?

Reference demo:

Image($rawfile('svgLevel.svg'))
  .width(100)
  .height(100)
  .rotate({
    x: 0,
    y: 0,
    z: 1,
    angle: 180
  })