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

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

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

2.TabContent设置

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

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

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

开启沉浸式就可以了

onWindowStageCreate(windowStage: window.WindowStage) { 
  windowStage.getMainWindowSync().setWindowLayoutFullScreen(true) 
  windowStage.loadContent('pages/Index', (err, data) => { 
    if (err.code) { 
      return; 
    } 
  }); 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

参考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}`) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
分享
微博
QQ
微信
回复
2024-08-10 17:38:03


相关问题
HarmonyOS 视频组件无法扩展其安全区
1085浏览 • 1回复 待解决
HarmonyOS 安全区域失效
765浏览 • 1回复 待解决
HarmonyOS 安全区域问题
991浏览 • 1回复 待解决
HarmonyOS 安全区域出错
802浏览 • 1回复 待解决
HarmonyOS WebView安全区域问题
613浏览 • 1回复 待解决
HarmonyOS scroll安全区域问题
856浏览 • 1回复 待解决