HarmonyOS 自定义全屏dialog

示例参考如下：

1、Index.ets

import window from '@ohos.window';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @StorageLink('windowStage') windowStage: window.WindowStage | undefined = undefined;
  pathStack: NavPathStack = new NavPathStack();
  curWindow: window.Window | undefined = undefined;
  dialogWindow: window.Window | undefined = undefined;
  @State windowWidth: number = 0;
  @State windowHeight: number = 0;

  aboutToDisappear(): void {
    if (this.dialogWindow) {
      this.dialogWindow.destroyWindow();
    }
    if (this.curWindow) {
      this.curWindow.off('windowSizeChange');
    }
  }

  aboutToAppear(): void {
    window.getLastWindow(getContext()).then((win) => {
      this.curWindow = win;
      let windowRect = win.getWindowProperties().windowRect;
      this.windowWidth = windowRect.width;
      this.windowHeight = windowRect.height;
      win.on('windowSizeChange', (size: window.Size) => {
        this.windowWidth = size.width;
        this.windowHeight = size.height;
      })
    })
  }

  build() {
    Navigation(this.pathStack) {
      Column() {
        Text('NavigationDialog')
          .onClick(() => {
            this.pathStack.pushPathByName('NavigationDialog', null, true)
          })
        Text('subWindowDialog')
          .onClick(() => {
            if (!this.windowStage) {
              return;
            }
            if (this.dialogWindow) {
              console.log('dialog window already exist');
              return;
            }
            this.windowStage.createSubWindow('subWindowDialog').then((subWindow) => {
              try {
                this.dialogWindow = subWindow;
                this.dialogWindow.moveWindowTo(0, 0);
                this.dialogWindow.resize(this.windowWidth, this.windowHeight);
                this.dialogWindow.setUIContent('pages/SubWindowPage');
                this.dialogWindow.showWindow((error: BusinessError) => {
                  console.log('show subwindowError');
                })
              } catch (err) {
                console.log('create subwidnow' + JSON.stringify(err));
              }
            });
          })
      }.margin({
        top: 100
      })
    }
    .height('100%')
    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.

2、NavigationDialog.ets

@Builder
function NavigationDialogBuilder() {
  NavigationDialog()
}

@Component
export struct NavigationDialog {
  build() {
    NavDestination() {
      Stack() {

      }
      .transition(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 500 }))
      .backgroundColor(Color.Pink)
      .width('100%')
      .height('100%')
    }
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

3、SubWindowPage .ets

import window from '@ohos.window';

@Entry
@Component
struct SubWindowPage {
  @State message: string = 'SubWindowPage';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('SubWindowPageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          window.getLastWindow(getContext(this)).then((win) => {
            win.destroyWindow();
          })
        })
    }
    .backgroundColor(Color.Green)
    .height('100%')
    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

4、EntryAbility .ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    windowStage.getMainWindowSync().setWindowLayoutFullScreen(true);
    AppStorage.setOrCreate('windowStage', windowStage);
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

5、router_mapper.json

{
  "routerMap": [
    {
      "name": "NavigationDialog",
      "pageSourceFile": "src/main/ets/pages/NavigationDialog.ets",
      "buildFunction": "NavigationDialogBuilder"
    }
  ]
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

6、module.json5

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1",
      "car"
    ],
    "routerMap": "$profile:router_map",
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "extensionAbilities": [
      {
        "name": "EntryBackupAbility",
        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
        "type": "backup",
        "exported": false,
        "metadata": [
          {
            "name": "ohos.extension.backup",
            "resource": "$profile:backup_config"
          }
        ]
      }
    ]
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

同时可以参考模态转场动画：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-modal-transition-V5#%E4%BD%BF%E7%94%A8bindcontentcover%E6%9E%84%E5%BB%BA%E5%85%A8%E5%B1%8F%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA%E6%95%88%E6%9E%9C