DEV Community

Cover image for Daily Learnings about HarmonyOS Next: RelativeContainer Component, List Rebound, Flutter Method Invocation
kouwei qing
kouwei qing

Posted on

Daily Learnings about HarmonyOS Next: RelativeContainer Component, List Rebound, Flutter Method Invocation

#harmonyosnext

Daily Learnings about HarmonyOS Next: RelativeContainer Component, List Rebound, Flutter Method Invocation, Profiler Tool, etc.

1. What are the auto - alignment rules of the RelativeContainer component?

When the height is set to auto, why does the auto setting not take effect when the sub - component is set as follows:

top:{anchor: "__container__",align: VerticalAlign.Top}
Enter fullscreen mode Exit fullscreen mode

Isn't the anchor point of anchor set to top - alignment by default?

This is to avoid excessive performance overhead caused by double - layout. After marking the height as auto, in the vertical direction, the RelativeContainer will rely on the vertical layout of components, which will lead to double - layout. Because the sub - component is then laid out vertically relative to the container, at this time, the layout of the parent component has to rely on the result of the sub - component layout to perform layout again.

2. How to achieve the single - side rebound effect of scroll and list?

The single - side rebound effect can be controlled by obtaining currentOffset().yOffset in onDidScroll. In the list component, the single - side rebound effect can also be achieved through onScrollIndex.

Scroll Component 

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

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      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%')
      }
      .scrollable(ScrollDirection.Vertical) // Scroll direction is vertical
      .scrollBar(BarState.On) // Scroll bar is always visible
      .scrollBarColor(Color.Gray) // Scroll bar color
      .scrollBarWidth(10) // Scroll bar width
      .friction(0.6)
      .edgeEffect(this.yOffset <= 0? EdgeEffect.Spring : EdgeEffect.None) // Rebound when scrolling to the edge
      .onDidScroll(() => {
        this.yOffset = this.scroller.currentOffset().yOffset;
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }
}
Enter fullscreen mode Exit fullscreen mode

List Component 

@Entry
@Component
struct Index {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State isTop: boolean = true
  build() {
    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) // Layout direction
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider between each row
      .edgeEffect(this.isTop? EdgeEffect.None : EdgeEffect.Spring)
      .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
        if (firstIndex === 0) {
          this.isTop = true
        } else {
          this.isTop = false
        }
      })
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Can HarmonyOS call the Dart interface code of Flutter?

Using the MethodChannel#invokeMethod method of the ohos platform, HarmonyOS can call the methods in Dart code.

4. When using the profiler tool built - in the IDE to detect the CPU, the Current process shows 0%, and the Other process shows a high value. What is the meaning of these displayed data? How to use the tool to analyze the reason for the high CPU usage?

Other process includes desktop applications, some background services of the system, etc.

For specific CPU analysis, you can refer to the CPU activity analysis section of the official guidance document: https://developer.huawei.com/consumer/cn/doc/harmonyos - guides - V5/ide - insight - session - cpu - V5

5. HarmonyOS Error: Error while Deploy Hap?

The packaged har file is compiled successfully in the shell project, but the installation fails.

04/10 14:01:54: Install Failed: error: failed to install bundle.
code:9568278
error: install version code not same.
$ tiaoyou shell rm -rf data/local/tmp/f47e1222b8c64dbe92f86bc3b55cc3d2
Error while Deploy Hap
Enter fullscreen mode Exit fullscreen mode

This error is caused by the inconsistent versionCode field in app.json between the application to be installed and the already - installed application in the system.

  1. It is possible that the developer installed the application using the debug button of the IDE, and then reinstalled it using the hdc install method after packaging. You can use the following command to view the debug field information of the installed application: 
bm dump -n 应用bundleName | grep debug
Enter fullscreen mode Exit fullscreen mode

Uninstall and reinstall a common application:

hdc uninstall 应用bundleName
Enter fullscreen mode Exit fullscreen mode

Clear application data:

hdc shell bm clean -d -n 应用bundleName
Enter fullscreen mode Exit fullscreen mode
  1. It may also be caused by the inconsistency between the version of the application with saved data and the newly - installed version. ===》In Run configuration - General, uncheck the Keep Application Data option.

Top comments (0)