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

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

介绍

本示例通过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));
            });
相关推荐
天天扭码33 分钟前
零基础 | 入门前端必备技巧——使用 DOM 操作插入 HTML 元素
前端·javascript·dom
咖啡虫1 小时前
css中的3d使用:深入理解 CSS Perspective 与 Transform-Style
前端·css·3d
拉不动的猪1 小时前
设计模式之------策略模式
前端·javascript·面试
旭久1 小时前
react+Tesseract.js实现前端拍照获取/选择文件等文字识别OCR
前端·javascript·react.js
独行soc1 小时前
2025年常见渗透测试面试题-红队面试宝典下(题目+回答)
linux·运维·服务器·前端·面试·职场和发展·csrf
uhakadotcom2 小时前
Google Earth Engine 机器学习入门:基础知识与实用示例详解
前端·javascript·面试
麓殇⊙2 小时前
Vue--组件练习案例
前端·javascript·vue.js
outstanding木槿2 小时前
React中 点击事件写法 的注意(this、箭头函数)
前端·javascript·react.js
会点php的前端小渣渣2 小时前
vue的计算属性computed的原理和监听属性watch的原理(新)
前端·javascript·vue.js
_一条咸鱼_3 小时前
深入解析 Vue API 模块原理:从基础到源码的全方位探究(八)
前端·javascript·面试