Remove Rounded Corners from Dialog, Array Concatenation, Attach Custom Dialog to a Control, Translation Animation

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Remove Rounded Corners from Dialog, Array Concatenation, Attach Custom Dialog to a Control, Translation Animation, Page Stack Management

1. How to remove left-right transparency, bottom transparency, and rounded corners from HarmonyOS CustomDialog?

To remove left-right/bottom transparency and rounded corners from CustomDialog:

Set customStyle to true to enable custom styles.
Set borderRadius to 0 to remove rounded corners.

For attribute usage, refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5

2. HarmonyOS array concatenation: How to prepend one array to another?

Use concat to insert array elements:

let list: Array<number> = [1];
let list2: Array<number> = [2];
let list3 = list.concat(list2);
console.log(list3.toString());

3. How to attach a custom dialog to a specific component in HarmonyOS?

Aiming to attach a dialog below the Toolbar using CustomDialog:

The current CustomDialog API does not support attachment effects.
Try using bindContextMenu instead.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-menu-V5

4. HarmonyOS translation animation: How to set the starting point for an image moving from a specified coordinate to an endpoint?

Set the starting position via .position and use .translate for transition translation:

Example: Move from (100, 16) to (220, 16).
Use .position to fix the component at (100, 16), then set .translate to move 120px along the x-axis (y-axis remains 0), reaching (220, 16).

Refer to the code:

Image($r('app.media.app_icon')).width(30).height(30)
  .translate({ x: 120, y: 0 }) // Translate 120px on the x-axis, 0 on the y-axis
  .transition(TransitionEffect.SLIDE.animation({
    duration: 1200,
    curve: Curve.EaseOut,
    iterations: 1,
    delay: 100,
    playMode: PlayMode.Normal,
    onFinish: () => {
      // LogUtils.info(this.TAG,`---------Animation completed`)
    }
  }))
  .position({
    x: 100,
    y: 16
  })

5. Does @ohos.router in HarmonyOS not support autonomous page stack management?

For router navigation:

Use router.replaceUrl() to replace and destroy the current page.
Use ArkUI's Navigation component, which supports HarmonyOS page stack management. Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5

The Navigation component serves as the root view container for routing navigation, typically used as the root container of a Page. It internally includes a title bar, content area, and toolbar by default. The content area displays navigation content (child components of Navigation) on the home page or NavDestination child components on non-home pages, with switching between home and non-home pages achieved via routing.

DEV Community