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.');
    });
  }
复制代码

 

posted @   一抒山河  阅读(13)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示