HarmonyOS 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.home_tab_selected') : $r('app.color.home_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(HOME_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

zxjiu

2024-08-08 18:55:28

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

需要在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/arkts-develop-apply-immersive-effects-0000001820435461#section171801550301

使能组件安全区布局实现沉浸式效果可参考：https://gitee.com/openharmony/docs/blob/master/zh-cn/third-party-cases/immersion-mode.md

2024-08-08 21:22:20

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Tabs的TabContent通过expandSafeArea实现沉浸，顶部还是有个背景色块

订阅鸿蒙技术特刊，精选内容抢先看