HarmonyOS TabContent组件使用组件安全区方案不能延伸到状态栏

1.使用组件安全区方案Tabs设置

barPosition: BarPosition.End  
.vertical(false)  
.backgroundColor(Color.Red)  
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]),

2.TabContent设置

.backgroundColor(Color.Yellow)  
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) 

3.Tab组件背景色Color.Red可以延展到底部导航栏区域TabContent组件背景色Color.Yellow 却不能延展到顶部状态栏区域

HarmonyOS
2024-08-10 11:36:30
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

开启沉浸式就可以了

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

参考demo:

@Entry 
@Component 
struct IndexPage { 
  @State tabsIndex: number = 0; 
  aboutToAppear(): void { 
  } 
 
  build() { 
    Tabs({ barPosition: BarPosition.End }) { 
      TabContent(){ 
        Column() { 
          Text('tab1的内容') 
        }.width('100%').height('100%') 
        .backgroundColor(Color.Yellow) 
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) 
      } 
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) 
      .tabBar(this.TabBarBuilder(0, $r('app.media.startIcon'), $r('app.media.startIcon'), 'tab1')) 
 
      TabContent(){ 
        Column() { 
          Text('tab2的内容') 
        }.width('100%').height('100%') 
        .backgroundColor(Color.Green) 
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) 
      } 
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) 
      .tabBar(this.TabBarBuilder(1, $r('app.media.startIcon'), $r('app.media.startIcon'), 'tab2')) 
    } 
    .barHeight(56) 
    .barWidth('100%') 
    .vertical(false) 
    .backgroundColor(Color.Red) 
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) 
    .onChange((index: number) => { 
      this.tabsIndex = index; 
    }) 
    .height('100%') 
    .width('100%') 
  } 
 
  @Builder 
  TabBarBuilder(index: number, selectedImage: Resource, unselectedImage: Resource, tabBarName: string | Resource) { 
    Column() { 
      Image(this.tabsIndex === index ? selectedImage : unselectedImage) 
        .width(24) 
        .height(24) 
        .margin({ bottom: 4 }) 
 
      Text(tabBarName) 
        .fontSize(10) 
        .fontFamily('HarmonyHeiTi-Medium') 
        .fontColor(this.tabsIndex === index ? '#3C8AFF' : '#333333') 
    } 
    .width('100%') 
    .padding({ top: 6, bottom: 6 }) 
    .alignItems(HorizontalAlign.Center) 
    .id(`tabBar${index}`) 
  } 
}
分享
微博
QQ
微信
回复
2024-08-10 17:38:03
相关问题
关于屏幕安全区域的问题咨询
245浏览 • 1回复 待解决
沉侵式状态栏获取状态栏高度为0
285浏览 • 1回复 待解决