Tab Interception, Component Method as Parameter, Custom Component Chaining, Multiple Observer Listeners

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Tab Interception, Component Method as Parameter, Custom Component Chaining, Multiple Observer Listeners, Screen Orientation Switching

1. How to intercept tabBar clicks in the HarmonyOS Tab component and determine whether to allow tab switching based on conditions?

Intercepting Tab Switching

Currently, there is no built-in function to intercept tabBar clicks. You can use TabsController to customize tabs and add event logic. Example:

export class ButtonInfoModel {
  index: number = 0;
  info: string = 'home';
  title: string = 'Home';
}

const buttonInfo: ButtonInfoModel[] = [
  {
    index: 0,
    info: 'home',
    title: 'Home'
  },
  {
    index: 1,
    info: 'map',
    title: 'Map'
  },
  {
    index: 2,
    info: 'charging',
    title: 'Charging'
  }
]

@Component
export struct Home {
  @State message: string = 'Home';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text('Clicking prevents navigation to Charging; redirects to Map')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            buttonInfo[2].info = "map"
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
export struct Map {
  @State message: string = 'Map';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
export struct Charging {
  @State message: string = 'Charging';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2. Can methods decorated with @builder in HarmonyOS be passed as parameters?

Parameter Passing for @builder Methods

Currently, this parameter passing pattern is unsupported. Refer to parameter passing for custom builder functions:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5

ArkUI provides a lightweight UI reuse mechanism @Builder for fixed UI structures with data binding. Reusable UI elements can be abstracted into methods and invoked in the build method.

3. Does HarmonyOS support chaining calls for custom components?

Implementing Chaining Calls for Custom Components

Use @Styles or @Extend decorators to enable chaining when defining component style methods.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-style-V5

To avoid redundant style code, the @Styles decorator allows extracting common styles into reusable methods, which can be called directly during component declaration.

4. @Observed fails to monitor multi-level data structures in HarmonyOS?

Two-Way Data Synchronization for Nested Structures

Use @ObjectLink and @Observed decorators together for bidirectional synchronization in nested objects/arrays.

Details: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md

5. How to implement screen orientation switching for pages in HarmonyOS?

Setting Screen Orientation

setPreferredOrientation(orientation: Orientation, callback: AsyncCallback<void>): void

Set the display orientation of the main window using an asynchronous callback. This only works on devices supporting sensor rotation and is ineffective in: