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

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

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

不会生效。

HarmonyOS
2024-09-23 12:46:28
浏览
收藏 0
回答 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修改
分享
微博
QQ
微信
回复
2024-09-23 18:11:34
相关问题
HarmonyOS部分场景expandSafeArea生效
1016浏览 • 1回复 待解决
HarmonyOS expandSafeArea生效
287浏览 • 1回复 待解决
ConstraintSize尺寸设置生效
2373浏览 • 1回复 待解决
如何设置沉浸状态栏
2569浏览 • 1回复 待解决
通过WindowProperties设置属性生效
2144浏览 • 1回复 待解决
HarmonyOS stack设置圆角生效
29浏览 • 1回复 待解决
HarmonyOS Panel 设置 borderRadius 生效
689浏览 • 1回复 待解决
如何设置沉浸窗口,你会吗?
1927浏览 • 1回复 待解决
Tab 设置 barBackgroundColor为透明生效
288浏览 • 1回复 待解决
HarmonyOS Badge文本颜色设置生效
265浏览 • 1回复 待解决
HarmonyOS Tabs组件做沉浸失败
382浏览 • 1回复 待解决
List组件的initialIndex属性设置生效
2248浏览 • 1回复 待解决
HarmonyOS 设置了icon和label生效
316浏览 • 1回复 待解决