HarmonyOS鸿蒙Next中tab组件如何扩展到安全区？

HarmonyOS鸿蒙Next中tab组件如何扩展到安全区？ 不使用 ignoreLayoutSafeArea() 代码如下：

@Entry
@ComponentV2
export struct Index {

  build() {
     Navigation(){
         Tabs({barPosition:BarPosition.End}){
           TabContent(){
             Column(){
               Text('1')
             }
             .width('100%')
             .height('100%')
             .backgroundColor(Color.Green)
             .justifyContent(FlexAlign.Center)
             .ignoreLayoutSafeArea()
           }.tabBar('1')
           TabContent(){
             Column(){
               Text('2')
             }
           }.tabBar('2')
         }
         // .ignoreLayoutSafeArea()
       }
       .hideTitleBar(true)
       .hideToolBar(true)
   }
}

效果如下：

cke_8867.png

使用 ignoreLayoutSafeArea() 效果如下：

cke_19377.png

下方会多出这么一块空白，如何解决呢？我只想在这个页面实现状态栏扩展，不想使用全局的安全区扩展，有什么办法可以实现呢？求教！


更多关于HarmonyOS鸿蒙Next中tab组件如何扩展到安全区？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

修改完毕，增加三处代码即可：

@Entry
@ComponentV2
export struct Index {
  build() {
    Navigation() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Row() {
            Text('1')
          }
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .justifyContent(FlexAlign.Center)
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])   //1

        }.tabBar('1')
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])    //2


        TabContent() {
          Column() {
            Text('2')
          }
        }.tabBar('2')

      }
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])    //3

    }
    .hideTitleBar(true)
    .hideToolBar(true)
  }
}

效果图：

cke_1974.png

更多关于HarmonyOS鸿蒙Next中tab组件如何扩展到安全区？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢大佬

在HarmonyOS Next中，使用tab组件时，可通过safeArea属性扩展至安全区。具体操作是在tab组件的属性设置中添加safeArea参数，并配置其值为true或指定安全区类型，如safeArea({ type: SafeAreaType.SYSTEM })，以确保内容避开刘海屏等区域。

在HarmonyOS Next中，要实现Tab组件内容区扩展到安全区，同时避免底部TabBar下方出现空白，关键在于对Tabs和TabContent进行分层处理。

你的代码中，.ignoreLayoutSafeArea()应用在了单个Column上，这只会影响该Column的布局。要实现整个TabContent区域（包括可滚动内容）扩展到安全区，需要将安全区忽略应用到正确的容器层级。

解决方案如下：

修改你的代码，将.ignoreLayoutSafeArea()修饰符从Column移动到TabContent上。这样，整个TabContent的内容区域都将忽略安全区限制，实现全屏显示，而TabBar会保持在安全区之上。

@Entry
@ComponentV2
export struct Index {
  build() {
    Navigation() {
      Tabs({ barPosition: BarPosition.End }) {
        // 将ignoreLayoutSafeArea应用到TabContent
        TabContent() {
          Column() {
            Text('1')
          }
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .justifyContent(FlexAlign.Center)
          // 注意：这里移除了Column上的ignoreLayoutSafeArea
        }
        .tabBar('1')
        .ignoreLayoutSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) // 关键修改
        
        TabContent() {
          Column() {
            Text('2')
          }
        }
        .tabBar('2')
        .ignoreLayoutSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) // 关键修改
      }
      // 保持Tabs组件本身不忽略安全区，以确保TabBar位置正确
    }
    .hideTitleBar(true)
    .hideToolBar(true)
  }
}

参数说明：

  • [SafeAreaType.SYSTEM]：指定忽略系统安全区。
  • [SafeAreaEdge.BOTTOM]：指定忽略底部安全区。你可以根据需要添加TOP、LEFT、RIGHT。

这样实现的优势：

  1. 局部生效：仅当前页面的TabContent内容区域扩展到安全区，不影响应用内其他页面。
  2. TabBar位置正确：TabBar会保持在安全区上方，不会与底部手势区域重叠。
  3. 内容区域全屏：每个Tab页的内容都可以充分利用屏幕空间。

这种方法避免了全局安全区设置，实现了你想要的页面级局部扩展效果。

回到顶部