[Learn HarmonyOS Next Knowledge Daily] Hotfix, Image Preview, Performance Issues with Multiple @State Refreshes, etc.

1. Is it recommended to use bm quickfix to create repair packages?

The official document shows the command for installing quick-fix patches: bm quickfix -a -f /data/app/, but two issues exist:

1. Documentation on how to create HQF files is missing.
2. Is HQF a delta package between the new and old versions? Scenario: Can the bm quickfix command repair partial bugs during app runtime? Are there relevant reference documents?

Current recommendation: Manual creation of HQF packages is not recommended. Use the hot-reload capability instead: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-hot-reload-0000001527628941-V5?catalogVersion=V5

2. How to implement image preview?

How to implement clicking an image to enlarge it with pinch-to-zoom support?

@Entry
@Component
struct Index {
  @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.icon'))
            .width(100)
            .height(100)
            .onClick(() => {
              console.log("hit me!")
              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%')// Transparency can be adjusted
        .opacity(0.16)
        .backgroundColor(0x000000)
        .visibility(this.visible)

      Column() {
        Image($r('app.media.icon'))
          .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 })
                .onActionStart((event?: GestureEvent) => {
                  console.info('Pinch start')
                })
                .onActionUpdate((event?: GestureEvent) => {
                  if (event) {
                    this.scaleValue = this.pinchValue * event.scale
                    this.pinchX = event.pinchCenterX
                    this.pinchY = event.pinchCenterY
                  }
                })
                .onActionEnd(() => {
                  this.pinchValue = this.scaleValue
                  console.info('Pinch end')
                }),

              PanGesture()
                .onActionUpdate((event?: GestureEvent) => {
                  if (event) {
                    this.offsetX = this.positionX + event.offsetX
                    this.offsetY = this.positionY + event.offsetY
                  }
                  console.info('pan update')
                })
                .onActionEnd(() => {
                  this.positionX = this.offsetX
                  this.positionY = this.offsetY
                  console.info('pan end')
                })
            )
          )
      }
    }
  }
}

3. What are the roles of netlost and netUnavailable in the connection module?

• The netlost event monitors network status loss, such as when Wi-Fi/mobile network disconnects.
• The netUnavailable event monitors scenarios where the network is connected but abnormal, preventing normal browser access.

4. How to handle installation error code: 9568347, error: install parse native so failed?

Refer to the official document for troubleshooting:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/bm-tool-V5#%E5%AE%89%E8%A3%85hap%E6%97%B6%E6%8F%90%E7%A4%BAcode9568347-error-install-parse-native-so-failed%E9%94%99%E8%AF%AF

5. Will batch-refreshing multiple @State variables in a custom component affect performance?

For example, a custom Component has 20 @State variables, each with defined update interfaces. If these States are batch-updated at a certain timing, will calling each State's update interface cause frequent Component updates and performance issues?

Batch-updating multiple State interfaces does not cause performance issues. Each @State is designed to update the UI, and modifying multiple States at once does not trigger repeated refreshes for the same component. Within one Vsync cycle, multiple dirt markings for the same component only trigger one refresh.