HarmonyOS解决顶部和底部沉浸式白边
全面屏时代的手机顶部都是状态栏,底部则是全面屏手势滑动起始区域
关于这上下两边都一般默认设置的白边,对于一些有颜色主题的页面来说就会略显生硬
以下代码可以解决顶部底部的白边问题,并且自适应padding收缩
onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); windowStage.loadContent('pages/Index', (err) => { // windowStage.getMainWindowSync().setWindowBackgroundColor('#ff0000') if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; } // 以下是设置沉浸式,以及获取设备导航条、状态栏高度的代码 windowStage.getMainWindow().then(w => { // 设置沉浸式 w.setWindowLayoutFullScreen(true) // 获取设备区域参数 let avoidArea = w.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM) let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度 AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight); // 存到本地存储 let topRectHeight = avoidArea.topRect.height; // 获取状态栏区域高度 AppStorage.setOrCreate('topRectHeight', topRectHeight); // 存到本地存储 // 当区域发生改变(例如竖屏变横屏),重新获取一次再保存 w.on('avoidAreaChange', (data) => { if (data.type === window.AvoidAreaType.TYPE_SYSTEM) { let topRectHeight = data.area.topRect.height; AppStorage.setOrCreate('topRectHeight', topRectHeight); } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) { let bottomRectHeight = data.area.bottomRect.height; AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight); } }); }) hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); }); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步