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

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

介绍

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

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

效果预览

使用说明

  1. 点击"全屏"按钮,设置页面为全屏
  2. 点击"关闭全屏按钮",关闭页面全屏

实现思路

  1. 设置窗口全屏
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));
            });
  1. 关闭窗口全屏
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));
            });
相关推荐
伍华聪9 分钟前
基于Vant4+Vue3+TypeScript的H5移动前端
前端
Nayana10 分钟前
axios-取消重复请求--CancelToken&AbortController
前端·axios
大舔牛18 分钟前
网站性能优化:小白友好版详解
前端·面试
转转技术团队26 分钟前
你的H5页面在折叠屏上适配了吗?
前端
北辰浮光38 分钟前
[Web数据控制]浏览器中cookie、localStorage和sessionStorage
前端·vue.js·typescript
Dolphin_海豚41 分钟前
charles proxying iphone
前端·ios
用户8417948145641 分钟前
vue 如何使用 vxe-table 来实现跨表拖拽,多表联动互相拖拽数据
前端·vue.js