Scroll Events, Pixel Units, Radius Removal, Frame Capture, Component Reuse

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Scroll Events, Pixel Units, Radius Removal, Frame Capture, Component Reuse

1. Does HarmonyOS Scroll support onendreachedthreshold with the endreached event? How to trigger the endreached event based on the distance from the bottom?

The component can be implemented by judging the offset. Refer to the demo below:

import display from '@ohos.display';

@Entry
@Component
struct page240510141709017 {
  scroller: Scroller = new Scroller()
  @State yOffset: number = 0
  @State yPosition: number = 150
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  private childH: number = 0
  private screenH: number = 0

  build() {
    Column() {
      Scroll(this.scroller) {
        Column() {
          ForEach(this.arr, (item: number) => {
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
          }, (item: string) => item)
        }
        .width('100%')
        .onAppear(() => {
          this.childH = this.scroller.getItemRect(0).height
          console.log('this.childH', this.childH)
        })
      }
      .scrollable(ScrollDirection.Vertical) // Vertical scrolling direction
      .scrollBar(BarState.On) // Scrollbar always visible
      .scrollBarColor(Color.Gray) // Scrollbar color
      .scrollBarWidth(10) // Scrollbar width
      .friction(0.6)
      .edgeEffect(EdgeEffect.None)
      .width('100%')
      .height('100%')
      .onDidScroll(() => {
        if (!this.screenH) {
          let displayClass: display.Display | null = null;
          displayClass = display.getDefaultDisplaySync()
          this.screenH = px2vp(displayClass.height)
          console.log('this.screenH', this.screenH)
        }
        const yCurrentOffset = this.scroller.currentOffset().yOffset
        console.log('yCurrentOffset', yCurrentOffset)
        if (yCurrentOffset < 100) {
          console.log('is < top 100')
        } else if (yCurrentOffset > this.childH - this.screenH - 100) {
          console.log('is > bottom 100')
        }
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }
}

2. Conversion and verification of pixel units in HarmonyOS

Conversion between vp and px, and how to verify the correctness of the conversion.

Introduction to pixel units: https://gitee.com/openharmony/docs/blob/master/zh-cn/design/ux-design/visual-basis.md
Pixel unit conversion: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-pixel-units.md
Pixel unit conversion verification reference: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/typical-layout-scenario.md#%E4%B8%89%E5%88%86%E6%A0%8F

Convert length units from px to vp:

let windowWidthVp = windowWidth / (display.getDefaultDisplaySync().densityDPI / 160)

3. How to remove rounded corners from bindPopup in HarmonyOS?

Reference: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-popup.md

Set the bubble corner radius through the radius attribute.

4. Does HarmonyOS xcomponent have an API to capture a specific frame within the xcomponent?

The XComponent itself does not have a related interface. Please refer to whether the image.createPixelMapFromSurface interface meets your needs:

Documentation link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#imagecreatepixelmapfromsurface11

createPixelMapFromSurface(surfaceId: string, region: Region): Promise<PixelMap>

Creates a PixelMap object based on the Surface ID and region information. The region size is specified by Region.size, returned as a Promise.

5. How to avoid attribute value conflicts when reusing HarmonyOS components?

Dynamic attributes can be used to set component properties to avoid conflicts: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md

DEV Community