每标签页沉浸式状态栏和编程式 TabBar 隐藏（ArkUI Tabs）

It looks like only the source citation was provided. Could you please share the rest of the article text you’d like translated? Once I have the full content, I’ll translate it into Simplified Chinese while preserving the original formatting, markdown, and technical terms.

需求描述

Q1: 在使用 Tabs 构建页面时，如何让特定的 TabContent 实现 沉浸式（全屏）顶部状态栏 效果？

Q2: 使用 Tabs 时，如何以编程方式 隐藏 TabBar？

背景知识

实现步骤

Q1 – 仅针对目标 TabContent 的沉浸式状态栏

1. 页面 / Tabs 根节点 – 允许内容延伸到系统安全区域：

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

2. 目标 TabContent – 禁用裁剪，使其子元素可以绘制到扩展区域：

   .clip(false)

3. 在该 TabContent 内部 – 对应渲染全屏的容器使用 expandSafeArea。

Q2 – 以编程方式隐藏 TabBar

1. 将布尔状态（例如 isTabBarVisible）绑定到 Tabs 组件。

2. 切换尺寸属性：

   .barHeight(isTabBarVisible ? -1 : 0)
   .barWidth(isTabBarVisible ? -1 : 0)

   • 0 → 隐藏标签栏。
   • -1 → 使用默认尺寸。

3. （可选）添加短暂动画以实现更平滑的过渡：

   .animationDuration(400)   // duration in ms

代码片段

Q1 – 每标签沉浸式状态栏

@Entry
@Component
struct TabsExample {
  build() {
    Tabs({ barPosition: BarPosition.End }) {
      // ----- First Tab (immersive) -----
      TabContent() {
        Column() {
          Text('Homepage Content')
            .fontSize(30)
            .width('100%')
            .height('100%')
            .backgroundColor('#0A59F7')
            .textAlign(TextAlign.Center)
            // Immersive effect for this tab's content
            .expandSafeArea([SafeAreaType.SYSTEM],
                            [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        }
        .height('100%')
        .width('100%')
      }
      .clip(false)                     // allow drawing beyond bounds
      .tabBar('Home')

      // ----- Second Tab (normal) -----
      TabContent() {
        Row() {
          Text('Recommended content')
            .fontSize(30)
            .width('100%')
            .height('100%')
            .backgroundColor('#F1F3F5')
            .textAlign(TextAlign.Center)
        }
        .height('100%')
      }
      .tabBar('Recommendation')
    }
    .expandSafeArea([SafeAreaType.SYSTEM],
                    [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .width('100%')
    .height('100%')
  }
}

提示: 使用 IDE 预览中的 Enter fullscreen mode / Exit fullscreen mode 按钮来验证沉浸效果。

Q2 – 编程方式隐藏/显示 TabBar

@Entry
@Component
struct TabsExample {
  @State isTabBarVisible: boolean = true;
  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  @State currentIndex: number = 1;
  private controller: TabsController = new TabsController();

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 });
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0);
    }
    .width('100%');
  }

  build() {
    Column() {
      Blank().height('5%');

      // ---- Controls to toggle TabBar visibility ----
      Row() {
        Text('Hide')
          .height('3%')
          .onClick(() => this.isTabBarVisible = false);
        Blank().width('25%');
        Text('Display')
          .height('3%')
          .onClick(() => this.isTabBarVisible = true);
      }
      .height('15%');

      // ---- Tabs ----
      Tabs({
        barPosition: BarPosition.End,
        index: this.currentIndex,
        controller: this.controller
      }) {
        TabContent() { Column().width('100%').height('100%').backgroundColor('#00CB87') }
          .tabBar(this.tabBuilder(0, 'green'));

        TabContent() { Column().width('100%').height('100%').backgroundColor('#007DFF') }
          .tabBar(this.tabBuilder(1, 'blue'));

        TabContent() { Column().width('100%').height('100%').backgroundColor('#FFBF00') }
          .tabBar(this.tabBuilder(2, 'yellow'));
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(this.isTabBarVisible ? -1 : 0)
      .barHeight(this.isTabBarVisible ? -1 : 0)
      .animationDuration(400)
      .onChange((index: number) => this.currentIndex = index)
      .width('100%')
      .height('64%')
      .backgroundColor('#F1F3F5');
    }
    .width('100%');
  }
}

提示: 使用预览中的 Enter fullscreen mode / Exit fullscreen mode 按钮来平滑查看 TabBar 的隐藏和显示。

测试结果

• 沉浸式渲染 – 已验证只有第一个 TabContent 渲染为全宽；第二个标签页保持正常布局。
• TabBar 可见性 – 已确认切换 isTabBarVisible 能立即使用定义的动画隐藏/显示 TabBar，同时标签选择和页面导航仍能正常工作。

限制或注意事项

• barHeight: 'auto' 仅在 水平 模式下适用；隐藏时需显式使用 0。
• 沉浸式内容必须自行管理与状态栏叠加层的对比度/可读性（必要时考虑背景颜色或顶部内边距）。
• 圆形可穿戴设备屏幕：确认角落/半径不会被裁剪；确保触控目标是 ≥ 44 vp。

相关文档或链接

• expandSafeArea
• barHeight

作者 Bunyamin Eymen Alagoz