Video Component, Slider Component, Focus Acquisition Failure, Touch Hotspot, Rich Text Component Scrolling

[Daily HarmonyOS Next Knowledge] Video Component, Slider Component, Focus Acquisition Failure, Touch Hotspot, Rich Text Component Scrolling

1. HarmonyOS native video component cannot obtain the width and height of video content?

This issue can be addressed with the following code:

aboutToAppear(): void {
  media.createAVPlayer((error: BusinessError, player: media.AVPlayer) => {
    player.on('stateChange', async (state: string, reason: media.StateChangeReason) => {
      switch (state) {
        case 'initialized':
          player.prepare();
          break;
        case 'prepared':
          player.getTrackDescription((error: BusinessError, arrList: Array<media.MediaDescription>) => {
            if ((arrList) !== null) {
              console.debug("getTrackDescription", arrList[0][media.MediaDescriptionKey.MD_KEY_WIDTH])
              console.debug("getTrackDescription", arrList[0][media.MediaDescriptionKey.MD_KEY_HEIGHT])
            } else {
              console.error(`video getTrackDescription fail, error:${error}`);
            }
            player.release();
          });
          break;
      }
    })
    player.url = this.params.src
  });
}

2. When a HarmonyOS swiper is nested with a chart, the swiper scrolls left/right when the chart is dragged horizontally.

Refer to the PanGesture documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-gestures-pangesture-V5

Simple example code:

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct TestSwiperPage {
  private swiperController: SwiperController = new SwiperController()
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text('前')
          .width('90%')
          .height('90%')
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Scroll() {
          Column() {
            Web({ src: 'https://www.huawei.com/', controller: this.controller })
              .height(200)
              .width('100%')
              .backgroundColor('#11ff11')
              .gesture(
                PanGesture(this.panOption)
              )

            Column() {
              Text('此区域可正常操作').fontColor('#ffffff').fontSize('30vp').margin({top: 200})
            }.height(2000)
            .width('100%')
            .backgroundColor('#112311')
          }
        }
        .width('90%')
        .height('100%')

        Text('后')
          .width('90%')
          .height('90%')
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .interval(3000)
      .autoPlay(false)
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ff11ff')
  }
}

3. HarmonyOS focusControl.requestFocus fails to acquire focus.

The component may not be focusable by default. Set focusable(true) to enable focus.

4. HarmonyOS touch hotspot deviates from the actual component position. How to avoid this?

Set the touch hotspot using: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-touch-target-V5

5. HarmonyOS RichText scrolls when exceeding the specified height, but scrolling is unexpected. How to disable scrolling?

Set hitTestMode to None to make the component ignore touch events:

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-hit-test-behavior-V5