鸿蒙系统如何实现页面全屏功能（附代码示例）

本文将详细介绍在鸿蒙系统里如何实现页面全屏功能，并附上示例代码。这篇内容首发于华为开发者社区，希望能给大家带来帮助。

一、整体介绍

本示例主要借助windowClass.setWindowLayoutFullScreen方法来控制页面是否全屏显示。下面先来看一下实现该功能后的效果以及具体的使用方式。

（一）效果预览

从实际效果来看，页面上会有“全屏”和“关闭全屏”两个按钮。当用户点击相应按钮时，页面会在全屏和非全屏状态之间切换。

（二）使用说明

• 进入全屏：用户点击“全屏”按钮，页面即可切换至全屏模式，此时页面会占据整个屏幕空间，隐藏系统状态栏和其他干扰元素，为用户呈现更广阔的视野。
• 退出全屏：点击“关闭全屏按钮”，页面将退出全屏模式，恢复到正常显示状态。

二、实现思路与代码详解

实现页面全屏功能的核心在于正确调用windowClass.setWindowLayoutFullScreen方法，并处理好相应的逻辑。下面对设置窗口全屏和关闭窗口全屏的代码分别进行解读。

（一）设置窗口全屏

// 获取当前应用的主窗口对象，这里AppStorage.get("mainWindow")用于获取存储在AppStorage中的主窗口对象，并将其类型转换为window.Window
let windowClass = AppStorage.get("mainWindow") as window.Window
// 调用setWindowLayoutFullScreen方法将窗口设置为全屏模式，传入true表示开启全屏
windowClass.setWindowLayoutFullScreen(true)
  .then(() => {
      // 如果设置全屏成功，会进入这个回调函数，通过hilog.info记录成功信息，方便开发者在调试时查看
      hilog.info(0x0000,'test','Succeeded in setting the window layout to full-screen mode.');
    })
  .catch((err: BusinessError) => {
      // 如果设置全屏失败，会进入这个回调函数，err包含错误信息，通过JSON.stringify将错误信息转为字符串格式记录下来，便于排查问题
      hilog.error(0x0000,'test','Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
    });

在这段代码中，首先获取主窗口对象，然后调用setWindowLayoutFullScreen方法并传入true来设置窗口为全屏模式。该方法返回一个Promise对象，通过then和catch分别处理设置成功和失败的情况，记录相应的日志信息。

（二）关闭窗口全屏

// 获取当前应用的主窗口对象，同样从AppStorage中获取并进行类型转换
let windowClass = AppStorage.get("mainWindow") as window.Window
// 调用setWindowLayoutFullScreen方法关闭窗口全屏模式，传入false表示关闭全屏
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));
    });

这段代码与设置窗口全屏的代码结构相似，只是在调用setWindowLayoutFullScreen方法时传入false来关闭全屏模式，同样通过then和catch处理操作结果并记录日志。

通过以上代码，就可以在鸿蒙系统的应用中轻松实现页面的全屏和关闭全屏功能。希望这些内容对大家在鸿蒙系统开发中有所帮助，让大家能够更好地优化应用的界面展示效果。

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)