HarmonyOS 鸿蒙Next Tabs的TabContent通过expandSafeArea实现沉浸后顶部仍有背景色块

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Tabs的TabContent通过expandSafeArea实现沉浸后顶部仍有背景色块 Tabs的TabContent通过expandSafeArea实现沉浸，顶部还是有个背景色块，代码如下：

@Entry
@Component
struct Index {
  @State
  tabsIndex: number = 0;

  @Builder
  CustomTab(tabItem: TabBean, index: number){
    Flex({direction: FlexDirection.Column, justifyContent: FlexAlign.End, alignItems: ItemAlign.Center}){
      Image(this.tabsIndex == index ? tabItem.iconSelected : tabItem.icon)
        .width(tabItem.isBulge ? 45 : 25)
        .height(tabItem.isBulge ? 45 : 25)
        .margin({bottom: 4})
      Text(tabItem.name)
        .textAlign(TextAlign.Center)
        .fontSize(10)
        .fontColor(this.tabsIndex == index ? $r('app.color.tab_selected') : $r('app.color.tab_normal'))
    }
    .width('100%')
    .height('100%')
    .pixelStretchEffect({bottom:tabItem.isBulge ? 10 : 0})
  }

  @Builder
  CustomTabContent(tabItem: TabBean, index: number){
    Column(){
      HomePage()
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Blue)
  }

  build() {
    Tabs({barPosition: BarPosition.End}) {
      ForEach(tabs,(item: TabBean, index: number) =>{
        TabContent(){
          this.CustomTabContent(item, index)
        }
        .tabBar(this.CustomTab(item, index))
      })
    }
    .barMode(BarMode.Fixed)
    .align(Alignment.Bottom)
    .scrollable(false)
    .onChange((index: number) => {
      this.tabsIndex = index
    })
  }
}

更多关于HarmonyOS 鸿蒙Next Tabs的TabContent通过expandSafeArea实现沉浸后顶部仍有背景色块的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

需要在EntryAbility中设置窗口全屏，代码如下：

onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index', (err, data) => {
        if (err.code) {
            return;
        }

        let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
        // 1. 设置窗口全屏
        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));
        });
    });
}

可参考指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5

更多关于HarmonyOS 鸿蒙Next Tabs的TabContent通过expandSafeArea实现沉浸后顶部仍有背景色块的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS鸿蒙系统中Next Tabs组件在使用expandSafeArea实现沉浸效果后顶部仍出现背景色块的问题，这通常是由于布局或样式设置不当导致的。

在鸿蒙系统中，实现沉浸效果需要确保TabContent的布局正确扩展到安全区域之外。expandSafeArea属性用于指示组件是否应扩展到安全区域之外，但如果布局或样式中有其他设置覆盖了这一行为，就可能出现顶部背景色块。

解决方法包括：

  1. 检查TabContent的布局设置：确保TabContent的布局容器（如StackLayout、DirectionalLayout等）没有设置额外的内边距（padding）或外边距（margin），特别是顶部区域。

  2. 审查样式文件：检查相关的CSS样式文件，确保没有为TabContent或其子组件设置背景色或边框，这些样式可能会在沉浸效果下显露出来。

  3. 确认SafeArea的使用：确保在需要沉浸效果的页面或组件上正确使用了SafeArea组件，以指导布局如何适应屏幕的安全区域。

如果以上步骤仍然无法解决问题，可能是系统或组件本身的bug。此时，建议直接联系鸿蒙系统的官方客服寻求帮助。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部