HarmonyOS鸿蒙Next中tabs组件沉浸式TabContent无法实现沉浸式状态栏,只能让底部实现沉浸式,状态栏无效请问怎么解决

HarmonyOS鸿蒙Next中tabs组件沉浸式TabContent无法实现沉浸式状态栏,只能让底部实现沉浸式,状态栏无效请问怎么解决

import { PhotoStackView } from '../common/uicomponents/navbar';
import { HomePage } from "./HomePage"
import { PhotoAlbumPage } from "./PhotoAlbumPage"
import { Route, ZRouter } from '@hzw/zrouter';
import { RouterConstants } from "../common/utils/RouterConst";
import { common } from '@kit.AbilityKit';
import { curves } from '@kit.ArkUI';
import { Container } from '@kit.ArkGraphics3D';

// 定义动画常量
const DURATION = 250;

@Entry
@ComponentV2
@Route({ name: RouterConstants.LAYOUT_PAGE })
export struct LayoutPage {
  // 默认首页
  @Local currentIndex: number = 0;
  @Local isFullScreen: boolean = false; // 是否全屏展示
  private tabsController: TabsController = new TabsController();

  build() {
    NavDestination() {
      Stack() {
        // Tabs组件,隐藏原生标签栏
        Tabs({
          controller: this.tabsController,
          barPosition: BarPosition.End,
          index: this.currentIndex
        }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#ff8aa941').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
          }.tabBar('').width('100%').height('100%').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#007DFF').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
          }.tabBar('')
        }
        .onChange((index) => {
          this.currentIndex = index;
          console.info(`切换到页面索引: ${index}`);
        })
        // 禁止滑动切换 tabs
        // .scrollable(false)
        .barHeight(0) // 隐藏原生标签栏
      }
      .alignContent(Alignment.Bottom)
      .backgroundColor('red')
    }.hideTitleBar(true)
    .onBackPressed(() => {
      let uiContext = getContext(this) as common.UIAbilityContext;
      uiContext.moveAbilityToBackground() // 切换到后台
      return true;
    })
  }
}

更多关于HarmonyOS鸿蒙Next中tabs组件沉浸式TabContent无法实现沉浸式状态栏,只能让底部实现沉浸式,状态栏无效请问怎么解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

给Tabs, Stack, & NavDestination都增加扩展安全区的属性 试一下呢,

之前做的时候是上下都可以的.

更多关于HarmonyOS鸿蒙Next中tabs组件沉浸式TabContent无法实现沉浸式状态栏,只能让底部实现沉浸式,状态栏无效请问怎么解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以了 给 tabs 设置上就可以了,感谢大佬指点

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

不用客气, 一起学习~

大佬还有个问题,这样虽然全屏了但是我tabs 换成自定义组件后 自定义组件里面所有的元素都要加一遍这个才能实现 沉浸式,

这样干

这样感觉太恶心了,每个组件都要写一遍这个

只有最外层需要 expandSaveArea 的设置吧?但是这个需要验证一下。毕竟 text 大部分时候是不想扩展到状态栏的。一般是背景扩展,就只要最外层元素扩展就可以了。

另外,像是当前这种很多重复的设置,可以使用 @style。抽取成一个类写在一个地方。会稍微好一些。

如果大部分界面都是需要扩展的可以考虑第二种沉浸式方案(窗口全面屏),默认都是扩展的,哪个界面不需要需要单独设置安全区的 top, bottom 高度。

具体参考文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-develop-apply-immersive-effects

在HarmonyOS鸿蒙Next中,Tabs组件的沉浸式TabContent默认只支持底部沉浸式,状态栏无法自动实现沉浸式效果。要解决此问题,可以通过手动设置状态栏的沉浸式样式。使用Window类的setStatusBarColor方法,将状态栏颜色设置为透明,并结合setStatusBarVisibility方法调整状态栏的可见性。确保在布局文件中正确配置TabContent的样式,以实现状态栏的沉浸式效果。

在HarmonyOS Next中实现Tabs组件的沉浸式状态栏,需要注意以下几点:

  1. 当前代码中已正确使用了expandSafeArea来扩展安全区域,但状态栏可能仍被系统保留。这是因为NavDestination默认会保留状态栏区域。

  2. 解决方案是需要在NavDestination外层再包裹一个Stack,并设置其expandSafeArea属性:

@Entry
@ComponentV2
struct LayoutPage {
  build() {
    Stack() {
      NavDestination() {
        // 原有Tabs内容
      }
      .hideTitleBar(true)
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .width('100%')
    .height('100%')
  }
}
  1. 如果仍然无效,可以尝试在AbilityonWindowStageCreate中设置窗口标志:
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.loadContent('pages/LayoutPage');
  let windowClass = windowStage.getMainWindow();
  windowClass.setWindowSystemBarEnable(['status', 'navigation']);
  windowClass.setWindowLayoutFullScreen(true);
}
  1. 确保在config.json中声明了全屏权限:
"abilities": [
  {
    "name": "MainAbility",
    "configChanges": ["orientation"],
    "window": {
      "designWidth": 720,
      "autoMaximize": true
    }
  }
]

这些修改应该能解决状态栏无法沉浸的问题。如果仍然存在问题,可能是系统版本或设备特定的限制。

回到顶部