HarmonyOS鸿蒙Next中Tabs中的TabContent子组件无法延伸到状态栏

HarmonyOS鸿蒙Next中Tabs中的TabContent子组件无法延伸到状态栏 如上图,标题栏在页签Tabcontent中,标题栏的背景色需要延伸到状态栏(状态栏要保留,非全屏),每个标题栏的背景色也不相同

2 回复

在TabContent组件中将顶部状态栏设置为沉浸式效果，可先设置安全区域然后在TabContent组件上将clip属性值设置false，实现单个TabContent组件沉浸式效果设置。示例代码如下：

@Entry
@Component
struct tabContent1 {
  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Row() {
          Text('首页的内容')
            .fontSize(30)
            .width('100%')
            .height('100%')
            .backgroundColor(Color.Pink)
            // 设置沉浸式效果
            .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        }.height('100%')
      }
      //设置clip属性值为false
      .clip(false)
      .tabBar('首页')

      TabContent() {
        Row() {
          Text('推荐的内容')
            .fontSize(30)
            .width('100%')
            .height('100%')
            .backgroundColor(Color.Brown)
            .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        }.height('100%')
      }
      .tabBar('推荐')
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中Tabs中的TabContent子组件无法延伸到状态栏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Tabs组件的TabContent默认不会延伸到状态栏。要实现这一效果，可以通过以下步骤：

  1. 设置全屏模式：在onWindowFocusChanged中调用setSystemUiVisibility，将应用设置为全屏模式。
  2. 调整布局：在XML布局中，将Tabs组件的layout_height设置为match_parent，确保TabContent占满整个屏幕。
  3. 状态栏透明：在styles.xml中设置<item name="android:windowTranslucentStatus">true</item>，使状态栏透明。

通过这些调整，TabContent可以延伸到状态栏区域。

回到顶部