实现页面全屏功能鸿蒙示例代码

鸿蒙场景化示例代码技术工程师2025-04-14 15:10

本文原创发布在华为开发者社区。

介绍

本示例通过windowClass.setWindowLayoutFullScreen设置页面是否全屏。

实现页面全屏功能源码链接

效果预览

使用说明

点击"全屏"按钮，设置页面为全屏
点击"关闭全屏按钮"，关闭页面全屏

实现思路

设置窗口全屏

typescript 复制代码

let windowClass = AppStorage.get("mainWindow") as window.Window
          // 1. 设置窗口全屏
          windowClass.setWindowLayoutFullScreen(true)
            .then(() => {
              hilog.info(0x0000,'test','Succeeded in setting the window layout to full-screen mode.');
            })
            .catch((err: BusinessError) => {
              hilog.error(0x0000,'test','Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
            });

关闭窗口全屏

typescript 复制代码

 let windowClass = AppStorage.get("mainWindow") as window.Window
          // 1. 关闭窗口全屏
          windowClass.setWindowLayoutFullScreen(false)
            .then(() => {
              hilog.info(0x0000,'test','Succeeded in setting the window layout to full-screen mode.');
            })
            .catch((err: BusinessError) => {
              hilog.error(0x0000,'test','Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
            });