DEV Community

Cover image for Multi-task Windows, Animation Deformation, Clicks Outside Non-rectangular Components
kouwei qing
kouwei qing

Posted on

Multi-task Windows, Animation Deformation, Clicks Outside Non-rectangular Components

[Daily HarmonyOS Next Knowledge] Multi-task Windows, Animation Deformation, Clicks Outside Non-rectangular Components, Skipping Logo Launch Pages, Import Syntax Explanation

1. How to refresh the entire page when entering a background task from the multi-task window in HarmonyOS?

When an app enters the foreground from the background, the onPageShow callback is triggered. Page refresh can be implemented in onPageShow.

Reference document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-custom-component-lifecycle-V5#onpageshow

onPageShow?(): void

Triggered each time a page is displayed, including scenarios like routing or the app entering the foreground. Only valid for custom components decorated with @Entry.

2. When using animateTo for a container control's collapse effect in HarmonyOS, internal controls deform during contraction. Why?

Refer to the demo:

@Entry
@Component
struct IfElseTransition {
  @State flag: boolean = true;
  @State show: string = 'show';

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30).onClick(() => {
        if (this.flag) {
          this.show = 'hide';
        } else {
          this.show = 'show';
        }
        animateTo({ duration: 1000 },
          () => {
            // Control the appearance and disappearance of the Image component within the animation closure
            this.flag = !this.flag;
          })
      })
      if (this.flag) {
        // Configure different transition effects for the Image's appearance and disappearance
        Column() {
          Image($r('app.media.app_icon')).width(100).height(100)
          Text('Test Deformation Text').width(100).height(100).backgroundColor(Color.Blue)
        }
        .width(200)
        .height(200)
        .backgroundColor(Color.Black)
        .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } })
        .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
      }
    }.height('100%').width('100%')
  }
}
Enter fullscreen mode Exit fullscreen mode

3. How to avoid click events outside non-rectangular components in HarmonyOS?

Reference document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-touch-target

responseRegion(value: Array<Rectangle> | Rectangle)

Set one or more touch hotspots.

4. Is there a way to skip the logo launch page in HarmonyOS?

To display a customized launch page, skip the system's default launch page.

In the EntryAbility file's onWindowStageCreate method, use:

windowStage.loadContent('pages/splish', (err) => {
 //****
   });
Enter fullscreen mode Exit fullscreen mode

Specify the customized launch page and set the display duration in the splish page. After the timeout, navigate to the login page or app homepage.

5. What do different import syntaxes mean in HarmonyOS?

Three import usages:

  1. import { ExecutorImpl } from ‘…/impl/ExecutorImpl’
  2. import http from ‘@ohos.net.http’
  3. import ‘./ohcard/index’
  • Case 1: Imports only the ExecutorImpl identifier exported from ExecutorImpl.ets (which exports multiple identifiers).
  • Case 2: Imports the default http exported from @ohos.net.http, so {} is unnecessary.
  • Case 3: What does this signify?

    • Q1: Does it import all exported identifiers from ./ohcard/index.ets?
    • Q2: Will global functions and code in ./ohcard/index.ets execute? If multiple users import ./ohcard/index, will the global code execute repeatedly?

Answer: All three methods import files, but the imported variables differ. The third method imports the file without importing its exported variables. Importing the same file multiple times does not trigger repeated execution.

Top comments (0)