HarmonyOS .expandSafeArea\(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP\]\) 在Tabs组件中不生效？

Question

布局是

Tabs({barPosition:BarPosition.End,index:this.currentIndex}) {
  ForEach(this.tabItems, (item: MainTabItem,index?:number) => {
    if (item.tabType==MainTabType.USE_CAR){
      TabContent() {
        UseCarComponent()
      }.tabBar(this.tabBarItemBuilder(item,index))
      .tabIndex(index)
    }
    if (item.tabType==MainTabType.USE_CAR_ORDER){
      TabContent() {
        UseCarOrderComponent()
      }.tabBar(this.tabBarItemBuilder(item,index))
      .tabIndex(index)
    }
    if (item.tabType==MainTabType.RECOMMEND){
      TabContent() {
        RecommendComponent()
      }.tabBar(this.tabBarItemBuilder(item,index))
      .tabIndex(index)
    }
    if (item.tabType==MainTabType.MINE){
      TabContent() {
        MineComponent()
      }.tabBar(this.tabBarItemBuilder(item,index))
      .tabIndex(index)
    }
  })
}
.onChange((index)=>{
  this.currentIndex = index
})
.scrollable(true)
.barWidth('100%')
.barHeight(49)
.animationMode(AnimationMode.ACTION_FIRST)
.divider({strokeWidth:0.5,color:$r('app.color.color_block_10')})
.width('100%')
.height('100%')

我想要在切换到tab1 和 Tab3 进行沉浸式布局，使用.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) ，在Tabs 组件中并不生效

Answer 1

通过设置安全区域然后在tabcontent上设置clip为false，可以设置单个tabContent沉浸式

//demo:
@Entry
@Component
struct tabContent1 {
  @State message: string = 'Hello World‘;

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Row() {
          Text('首页的内容‘).fontSize(30).width('100%‘).height('100%‘).backgroundColor(Color.Red)
            .onClick(() => {
              router.pushUrl({url: 'pages/SecondPage‘})
            })
            .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        }.height('100%‘)
      }
      .clip(false)
      .tabBar('首页‘)
      TabContent() {
        Text('推荐的内容’).fontSize(30)
      }
      .tabBar('推荐‘)
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .width('100%‘)
    .height('100%‘)
  }
}