如何实现PC登录流程的窗口变化效果
=================

#### 问题现象

如何实现PC登录流程的窗口变化效果？期待的效果是：启动应用时，先出现一个用于登录的小窗，窗口没有标题栏，登录后变为全屏具有标题栏的主界面。

#### 背景知识

*   module.json5配置文件中[abilities标签](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file#abilities标签)中的startWindowIcon和startWindowBackground分别设置应用启动页的图标和背景颜色。
*   [resize](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#resize9-1)用于调整窗口大小。
*   [moveWindowTo](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#movewindowto9-1)用于移动窗口位置。
*   [setWindowDecorVisible](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setwindowdecorvisible11)用于设置标题栏是否可见。该接口需要在loadContent()调用生效后使用。
*   [setWindowTitleButtonVisible](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setwindowtitlebuttonvisible14)用于设置主窗口标题栏上的最大化、最小化、关闭按钮是否可见。

#### 解决方案

1.  将module.json5配置文件中abilities标签的startWindowIcon设置为透明图片，startWindowBackground设置为透明背景。这一步可以隐藏应用启动时系统自带的启动页，直接显示用于登录的小窗。
2.  在EntryAbility.ets文件中的onWindowStageCreate方法中通过resize将窗口尺寸设为小尺寸，并通过moveWindowTo实现居中放置；loadContent执行后通过setWindowDecorVisible和setWindowTitleButtonVisible将标题栏设为隐藏状态。这一步可以初始化窗口形态，用于实现登录用的小窗。
    
    import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
    import { hilog } from '@kit.PerformanceAnalysisKit';
    import { display, window } from '@kit.ArkUI';
    
    const DOMAIN = 0x0000;
    
    export default class EntryAbility extends UIAbility {
      onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
        console.info(\`want: ${want}\`);
        console.info(\`launchParam: ${launchParam}\`);
        try {
          this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR\_MODE\_NOT\_SET);
        } catch (err) {
          hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err));
        }
        hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
      }
    
      onDestroy(): void {
        hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
      }
    
      onWindowStageCreate(windowStage: window.WindowStage): void {
        AppStorage.setOrCreate('windowStage', windowStage);
        const windowClass = windowStage.getMainWindowSync();
        windowClass.resize(500, 500);
        windowClass.moveWindowTo(display.getDefaultDisplaySync().width / 2 - 250,
          display.getDefaultDisplaySync().height / 2 - 250, (err) => {
            console.info(\`want: ${err}\`);
          });
      _  // Main window is created, set main page for this ability_
        hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    
        windowStage.loadContent('pages/Index', (err) => {
          windowClass.setWindowDecorVisible(false);
          windowClass.setWindowTitleButtonVisible(false, false, false);
          if (err.code) {
            hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
            return;
          }
          hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
        });
      }
    
      onWindowStageDestroy(): void {
       _ // Main window is destroyed, release UI related resources_
        hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
      }
    
      onForeground(): void {
      _  // Ability has brought to foreground_
        hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
      }
    
      onBackground(): void {
     _   // Ability has back to background_
        hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
      }
    };
    
3.  登录后恢复标题栏并将窗口设为全屏。这一步用于实现主界面的全屏窗口。
    
    import { window } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct Index {
      context: Context | undefined = this.getUIContext().getHostContext();
    
      build() {
        RelativeContainer() {
          Text('登录')
            .id('HelloWorld')
            .fontSize($r('app.float.page\_text\_font\_size'))
            .fontWeight(FontWeight.Bold)
            .alignRules({
              center: { anchor: '\_\_container\_\_', align: VerticalAlign.Center },
              middle: { anchor: '\_\_container\_\_', align: HorizontalAlign.Center }
            })
            .onClick(() => {
              let windowStage = AppStorage.get('windowStage') as window.WindowStage;
              let windowClass: window.Window = windowStage.getMainWindowSync(); _// 获取应用主窗口_
              windowClass.setWindowDecorVisible(true);
              windowClass.setWindowTitleButtonVisible(true, true, true);
              windowClass.maximize(window.MaximizePresentation.FOLLOW\_APP\_IMMERSIVE\_SETTING);
              this.getUIContext().getRouter().pushUrl({ url: 'pages/MainPage', });
            });
        }
        .height('100%')
        .width('100%');
      }
    }
    
4.  登录后显示主页面。
    
    @Entry
    @Component
    struct MainPage {
      message: string = '主界面';
    
      build() {
        RelativeContainer() {
          Text(this.message)
            .id('HelloWorld')
            .fontSize($r('app.float.page\_text\_font\_size'))
            .fontWeight(FontWeight.Bold)
            .alignRules({
              center: { anchor: '\_\_container\_\_', align: VerticalAlign.Center },
              middle: { anchor: '\_\_container\_\_', align: HorizontalAlign.Center }
            });
        }
        .height('100%')
        .width('100%');
      }
    }