탭별 몰입형 상태 표시줄 및 프로그래밍 방식 탭바 숨기기와 ArkUI Tabs

Source: Dev.to

번역할 텍스트를 제공해 주시겠어요? 현재는 소스 링크만 포함되어 있어 번역할 내용이 없습니다. 텍스트를 알려주시면 한국어로 번역해 드리겠습니다.

요구 사항 설명

Q1: Tabs를 사용하여 페이지를 만들 때, **특정 TabContent**가 몰입형(전체 화면) 상단 상태 표시줄 효과를 활성화하려면 어떻게 해야 하나요?

Q2: Tabs를 사용할 때, TabBar를 프로그래밍 방식으로 숨기려면 어떻게 해야 하나요?

배경 지식

구현 단계

Q1 – 대상 TabContent에만 몰입형 상태 표시줄

1. Page / Tabs 루트 – 콘텐츠가 시스템 안전 영역으로 확장되도록 허용:

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

2. 대상 TabContent – 클리핑을 비활성화하여 자식이 확장된 영역에 그릴 수 있도록 함:

   .clip(false)

3. 해당 TabContent 내부 – 가장자리까지 렌더링해야 하는 컨테이너에 expandSafeArea를 적용.

Q2 – TabBar를 프로그래밍 방식으로 숨기기

1. Tabs 컴포넌트에 불리언 상태(예: isTabBarVisible)를 바인딩합니다.

2. 크기 속성을 토글합니다:

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

   • 0 → 바를 숨깁니다.
   • -1 → 기본 크기를 사용합니다.

3. (선택) 부드러운 전환을 위해 짧은 애니메이션을 추가합니다:

   .animationDuration(400)   // duration in ms

코드 스니펫

Q1 – 탭별 Immersive 상태 표시줄

@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%')
  }
}

Tip: IDE 미리보기에서 전체 화면 모드 진입 / 전체 화면 모드 종료 버튼을 사용해 Immersive 효과를 확인하세요.

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%');
  }
}

Tip: 미리보기에서 전체 화면 모드 진입 / 전체 화면 모드 종료 버튼을 사용하면 TabBar가 부드럽게 숨겨지고 표시되는 것을 확인할 수 있습니다.

테스트 결과

• Immersive rendering – 첫 번째 TabContent만 가장자리까지 렌더링되는 것을 확인했으며, 두 번째 탭은 일반 레이아웃을 유지합니다.
• TabBar visibility – isTabBarVisible 토글 시 정의된 애니메이션으로 TabBar가 즉시 숨겨지거나 표시되는 것을 확인했으며, 탭 선택 및 페이지 네비게이션은 정상적으로 작동합니다.

제한 사항 또는 고려 사항

• barHeight: 'auto'는 수평 모드에서만 적용됩니다; 숨기기는 0을 명시적으로 사용합니다.
• 몰입형 콘텐츠는 상태‑바 오버레이에 대비/가독성을 자체적으로 관리해야 합니다(필요에 따라 배경 색상이나 상단 패딩을 고려하세요).
• 원형 웨어러블 화면: 모서리/반경이 잘리지 않는지 확인하고, 터치 대상이 ≥ 44 vp인지 확인하세요.

관련 문서 또는 링크

• expandSafeArea
• barHeight

작성자 Bunyamin Eymen Alagoz