Nested Scrolling, Space Width/Height, Routing to Specified Page, Video Danmaku Function, Disable Auto Screen Off

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Nested Scrolling, Space Width/Height, Routing to Specified Page, Video Danmaku Function, Disable Auto Screen Off

1. How does HarmonyOS bindSheet implement the nested scrolling closure container effect?

Refer to the following code:

@Entry
@Component
struct SheetTransitionExample {
  @State isShow: boolean = false
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  @Builder
  myBuilder() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical)
      .width('90%')
    }
    .width('100%')
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {
          detents: [SheetSize.LARGE],
          backgroundColor: Color.Gray,
          blurStyle: BlurStyle.Thick,
          showClose: true,
          title: { title: "title", subtitle: "subtitle" },
          preferType: SheetType.CENTER
        })
        .onDisAppear(() => {
          this.isShow = false
        })
    }
    .justifyContent(FlexAlign.Start)
    .width('100%')
    .height('100%')
  }
}

2. How to obtain the width/height of a component and its coordinates on the screen in HarmonyOS?

Use onAreaChange().

Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5

onAreaChange(event: (oldValue: Area, newValue: Area) => void): T

This callback is triggered when the component's area changes, responding only to size/position changes caused by layout adjustments (not rendering properties like translate/offset, or positions determined by rendering such as bindSheet).

3. How does HarmonyOS Router return to a specified page?

Router.back() returns to the previous page. To return to a specific page (e.g., two levels back) or get all routable pages:

Use router.back with RouterOptions.url to specify the target page. Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5
Use router.getLength to get the number of pages in the stack. Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5

4. How to implement video danmaku functionality in HarmonyOS?

Refer to the video danmaku example: https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/danmakuplayer/README.md
For usage of @ohos.danmakuflamemaster, refer to: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fdanmakuflamemaster

5. How to temporarily disable auto screen off in HarmonyOS?

During face liveness detection, the system's 30-second auto screen off interrupts the process. How to disable it temporarily and restore settings afterward? How to listen for screen off callbacks?

Use setWindowKeepScreenOn(isKeepScreenOn: boolean, callback: AsyncCallback<void>): void to set screen keep-on status asynchronously.

Official documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5

DEV Community