Countdown Effect Implementation, Flex Properties, Foldable Screen Switching, Dynamic Import in Functions, UI Design Dimensions

[Daily HarmonyOS Next Knowledge] Countdown Effect Implementation, Flex Properties, Foldable Screen Switching, Dynamic Import in Functions, UI Design Dimensions

1. How to Implement a 60:00 Countdown Character Effect in HarmonyOS?

A countdown method is required to display the effect as a 120-minute countdown: 120:00, 119:59, 119:58, 119:57, where the left part is minutes and the right part is seconds, refreshing the string every second.

Refer to the following code to implement the countdown effect:

@Entry
@Component
struct Arc {
  @State countdownValue: number = 60;

  aboutToAppear(): void {
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

      Text(this.countdownValue.toString())
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .width(100)
        .height(45)
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height('100%')
  }

  onPageShow(): void {

    setInterval(() => {
      this.countdownValue--;
      if (this.countdownValue < 0) {
        clearInterval(this.countdownValue);
        return;
      }

    }, 1000);

  }
}

2. Why Do the Common Properties height and constrainSize.maxHeight of the HarmonyOS Flex Component Fail?

When using Flex to implement a flow layout with a set maximum height of 100, the content in the layout overflows and displays above the original layout if there is too much content.

You can add the .clip(true) property to the flex layout:

@Entry
@Component
struct Index {
@State searchHistoryList: string[] = ['111','2222','22333'];
build() {
Column() {
Button()
.onClick(() => {
this.searchHistoryList = this.searchHistoryList.concat(["111", "222", "333", "3435533"])
})
// Flex implements flow layout
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.searchHistoryList, (history: string) => {
Text(history.substring(0, 9))
.backgroundColor("#F2F4F8")
.border({
radius: 3
})
.fontSize(14)
.fontColor("#171E31")
.height(28)
.padding({
left: 12,
right: 12
})
.margin({
left: 4,
right: 4,
top: 8,
bottom: 8
})
.onClick(() => {
// todo Click history record to search for keywords
})
})
}
.width("100%")
.backgroundColor('#000')
.displayPriority(0)
// .height(100)
.constraintSize({
// Temporarily unable to find how to set a maximum of two lines, try limiting the maximum height
maxHeight: 89
})
.clip(true)
}.displayPriority(1.9)
.height(200)
}
}

3. Why Does the HarmonyOS Foldable Screen Automatically Split into Columns When Switching from Small to Large Screen, Causing Display Abnormalities?

The outermost page Navigation is set to .mode(NavigationMode.Stack), leading to abnormal display when switching the screen in reading mode.

After unfolding the foldable screen, the screen width needs to be recalculated; otherwise, the screen width remains in the folded state. Display will be normal after recalculation.

4. How to Specify the Return Type When Calling Dynamic Import in a HarmonyOS Function?

The document has similar code: import('myHar').then((ns: ESObject) => { console.log(ns.add(3, 5)); }); The return type is ESObject, but this makes code hints less friendly, as methods cannot be directly suggested after typing "ns.".

In a scenario where a function uses dynamic import, how to specify the return type? For example:

async getLogin() { return await import('@hik/login') }

Although the return type can be inferred by the system, if an interface is defined requiring the implementation of the getLogin() method, the return type must be specified. If specified as ESObject, it will cause the aforementioned hint issues, and collaborative development may lead to errors (e.g., method name changes not detected at compile time).

Refer to:

function DynamicNumber() :number{
  let number1:number = 0;
  import('../Calc').then((ns:ESObject) => {
    let calc:ESObject = new ns.Calc();  // Instantiate class Calc
    number1 = calc.instanceAdd(10, 11);  // Call member function instanceAdd()
    console.log('Index DynamicImport I am harlibrary in staticAdd, %d + %d = %d', 10, 11, number1);
    return number1;
  });
  return number1;
}

5. What About UI Design Dimensions in HarmonyOS Development?

In development, the default dimension unit is vp. How should UI designs provide dimensions?

For UI dimensions, use 720px as the基准 (baseline) for UI designs. 1vp is approximately equal to 3px. Refer to the document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-pixel-units-V5.

ArkUI provides 4 pixel units for developers, with vp as the基准 data unit.

Name	Description
px	Screen physical pixel unit.
vp	Screen density-related pixel, converted to screen physical pixels based on screen pixel density. When a value has no unit, the default unit is vp. Note: The ratio of vp to px depends on the screen pixel density.
fp	Font pixel, similar to vp but adapted to screen density changes and varies with system font size settings.
lpx	Viewport logical pixel unit. The lpx unit is the ratio of the actual screen width to the logical width (configured via designWidth), with designWidth defaulting to 720. When designWidth is 720, on a screen with an actual width of 1440 physical pixels, 1lpx equals 2px.

For screen adaptation solutions, use the layout capabilities in "One More" for screen adaptation. Refer to the document: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/layout-intro-V5.

Name	Introduction
Adaptive Layout	A layout capability where elements automatically change according to relative relationships (such as proportion, fixed width-height ratio, display priority, etc.) when the external container size changes. Currently, there are 7 adaptive layout capabilities: stretching, equal distribution, proportion, scaling, extension, hiding, and wrapping. Adaptive layout enables continuous interface display changes with external container size.
Responsive Layout	A layout capability where elements automatically change based on breakpoints, grids, or specific features (such as screen orientation, window width and height, etc.) when the external container size changes. Currently, there are 3 responsive layout capabilities: breakpoints, media queries, and grid layout. Responsive layout enables discontinuous interface changes with external container size, typically with significant differences in interface display under different features.