输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心
全部文档版本说明工具设计指南与API参考开发与测试上架分发与运营问题处理与运维最佳实践行业解决方案
问题处理与运维
您当前正在浏览新版开发者文档中心，目录分类和层级有所调整。点击左侧当前文档分类名称前的“☰”图标，可切换文档分类。 了解新版目录
问题处理与运维开发与测试问题多设备场景电脑常见问题如何实现PC登录流程的窗口变化效果

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

更新时间: 2026-06-26 07:47
复制页面
本文导读

问题现象

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

背景知识

  • module.json5配置文件中abilities标签中的startWindowIcon和startWindowBackground分别设置应用启动页的图标和背景颜色。
  • resize用于调整窗口大小。
  • moveWindowTo用于移动窗口位置。
  • setWindowDecorVisible用于设置标题栏是否可见。该接口需要在loadContent()调用生效后使用。
  • setWindowTitleButtonVisible用于设置主窗口标题栏上的最大化、最小化、关闭按钮是否可见。

解决方案

  1. 将module.json5配置文件中abilities标签的startWindowIcon设置为透明图片，startWindowBackground设置为透明背景。这一步可以隐藏应用启动时系统自带的启动页，直接显示用于登录的小窗。
  2. 在EntryAbility.ets文件中的onWindowStageCreate方法中通过resize将窗口尺寸设为小尺寸，并通过moveWindowTo实现居中放置；loadContent执行后通过setWindowDecorVisible和setWindowTitleButtonVisible将标题栏设为隐藏状态。这一步可以初始化窗口形态，用于实现登录用的小窗。
    收起
    自动换行
    深色代码主题
    复制
    1. import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
    2. import { hilog } from '@kit.PerformanceAnalysisKit';
    3. import { display, window } from '@kit.ArkUI';
    4. 

    5. const DOMAIN = 0x0000;
    6. 

    7. export default class EntryAbility extends UIAbility {
    8.   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    9.     console.info(`want: ${want}`);
    10.     console.info(`launchParam: ${launchParam}`);
    11.     try {
    12.       this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    13.     } catch (err) {
    14.       hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err));
    15.     }
    16.     hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
    17.   }
    18. 

    19.   onDestroy(): void {
    20.     hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
    21.   }
    22. 

    23.   onWindowStageCreate(windowStage: window.WindowStage): void {
    24.     AppStorage.setOrCreate('windowStage', windowStage);
    25.     const windowClass = windowStage.getMainWindowSync();
    26.     windowClass.resize(500, 500);
    27.     windowClass.moveWindowTo(display.getDefaultDisplaySync().width / 2 - 250,
    28.       display.getDefaultDisplaySync().height / 2 - 250, (err) => {
    29.         console.info(`want: ${err}`);
    30.       });
    31.     // Main window is created, set main page for this ability
    32.     hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    33. 

    34.     windowStage.loadContent('pages/Index', (err) => {
    35.       windowClass.setWindowDecorVisible(false);
    36.       windowClass.setWindowTitleButtonVisible(false, false, false);
    37.       if (err.code) {
    38.         hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
    39.         return;
    40.       }
    41.       hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    42.     });
    43.   }
    44. 

    45.   onWindowStageDestroy(): void {
    46.     // Main window is destroyed, release UI related resources
    47.     hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
    48.   }
    49. 

    50.   onForeground(): void {
    51.     // Ability has brought to foreground
    52.     hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
    53.   }
    54. 

    55.   onBackground(): void {
    56.     // Ability has back to background
    57.     hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
    58.   }
    59. };
  3. 登录后恢复标题栏并将窗口设为全屏。这一步用于实现主界面的全屏窗口。
    收起
    自动换行
    深色代码主题
    复制
    1. import { window } from '@kit.ArkUI';
    2. 

    3. @Entry
    4. @Component
    5. struct Index {
    6.   context: Context | undefined = this.getUIContext().getHostContext();
    7. 

    8.   build() {
    9.     RelativeContainer() {
    10.       Text('登录')
    11.         .id('HelloWorld')
    12.         .fontSize($r('app.float.page_text_font_size'))
    13.         .fontWeight(FontWeight.Bold)
    14.         .alignRules({
    15.           center: { anchor: '__container__', align: VerticalAlign.Center },
    16.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
    17.         })
    18.         .onClick(() => {
    19.           let windowStage = AppStorage.get('windowStage') as window.WindowStage;
    20.           let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
    21.           windowClass.setWindowDecorVisible(true);
    22.           windowClass.setWindowTitleButtonVisible(true, true, true);
    23.           windowClass.maximize(window.MaximizePresentation.FOLLOW_APP_IMMERSIVE_SETTING);
    24.           this.getUIContext().getRouter().pushUrl({ url: 'pages/MainPage', });
    25.         });
    26.     }
    27.     .height('100%')
    28.     .width('100%');
    29.   }
    30. }
  4. 登录后显示主页面。
    收起
    自动换行
    深色代码主题
    复制
    1. @Entry
    2. @Component
    3. struct MainPage {
    4.   message: string = '主界面';
    5. 

    6.   build() {
    7.     RelativeContainer() {
    8.       Text(this.message)
    9.         .id('HelloWorld')
    10.         .fontSize($r('app.float.page_text_font_size'))
    11.         .fontWeight(FontWeight.Bold)
    12.         .alignRules({
    13.           center: { anchor: '__container__', align: VerticalAlign.Center },
    14.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
    15.         });
    16.     }
    17.     .height('100%')
    18.     .width('100%');
    19.   }
    20. }
自由窗口下如何自定义窗口标题栏
穿戴
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明