Tabs, TabContent架构下实现沉浸式，设置设置 .expandSafeArea不生效

Tabs, TabContent架构下实现沉浸式，通过下面的方式。

([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

不会生效。

HarmonyOS

zxjiu

2024-09-23 12:46:28

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

可参考开发应用沉浸式效果的官方指导：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5#section202081847174413

分为两种实现方案：1种是窗口全屏布局方案，1种是组件安全区方案。

1.采用窗口全屏布局方案时，参考代码如下：

// entryAbiltity.ets  
let isLayoutFullScreen = true;  
windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)  
  .then(() => {  
    console.info('Succeeded in setting the window layout to full-screen mode.');  
  })  
  .catch((err: BusinessError) => {  
    console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));  
  });

获取布局避让遮挡的区域。

let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例  
let avoidArea = windowClass.getWindowAvoidArea(type);  
// 此处获取的单位为px，需转为vp  
let bottomRectHeight = px2vp(avoidArea.bottomRect.height); // 获取到导航条区域的高度  
console.log("bottomRectHeight is " + bottomRectHeight);  
AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);

再在tab页中将整体页面设置margin({bottom: bottomRectHeight})即可。

2.采用组件安全区方案，即不设置窗口全屏，这种场景下，针对底部的页签部分，Navigation组件和Tabs组件默认实现了页签的延伸处理，只需要保证Navigation和Tabs组件的底部边界和底部导航条重合即可。

已于2024-9-23 18:11:46修改