HarmonyOS TabContent架构下实现沉浸式，设置 .expandSafeArea不生效

Tabs，TabContent架构下实现沉浸式，通过下面的方式([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])不会生效。

HarmonyOS

fox280

2025-01-09 15:00:30

浏览

回答 1

待解决

回答 1

按赞同

按时间

aquaa

expandSafeArea扩展到父组件，clip是剪切效果默认为false不剪切(tab组件除外默认为true剪切，需要设置false)，您可参考下此demo,：

@Entry
@Component
struct TabContentExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder tabBuilder(index: number) {
    Column() {
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            Text('Tab1')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.backgroundColor('#4680ff').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]).tabBar(this.tabBuilder(0))
        TabContent() {
          Column() {
            Text('Tab2')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.tabBuilder(1))
      }
      .vertical(false).clip(false)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')
    }.width('100%')
  }
}