HarmonyOS：通过组件导航设置标题栏动态显隐及隐藏类型

ChinaDragon2026-03-10 12:00

一、场景介绍

从6.0.0(20) Beta1版本开始，导航组件新增支持设置标题栏动态显隐及隐藏类型。

当应用开发者需要动态隐藏标题栏时，可通过使用dynamicHideTitleBar属性实现该功能。设置隐藏标题区域前提下，才可以设置隐藏状态栏。

二、开发示例

效果图

示例代码 TestUIDesign5.ets

bash 复制代码

import { HdsNavigation, HdsNavigationAttribute, BottomBuilderShowType, HideMode } from '@kit.UIDesignKit';

@Entry
@Component
struct TestUIDesign5 {
  @State arr: number[] = [];

  // 创建一级导航组件，通过配置titleBar中menu的badge属性，设置信息提醒样式。

  aboutToAppear(): void {
    for (let index = 0; index < 40; index++) {
      this.arr.push(index);
    }
  }

  @Styles
  listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width('calc(100% - 20vp)')
    .borderRadius(12)
    .margin({ left: 10, right: 10 })
  }

  @Builder
  StackBuilder() { // 自定义StackBuilder组件
    Column() {
      Button("Hello")
    }
    .height(56)
    .justifyContent(FlexAlign.Center)
  }

  @Builder
  BottomBuilder() { // 自定义BottomBuilder组件
    Column() {
      Search().margin({ left: 16, right: 16 })
    }
    .width('100%')
    .height(56)
  }

  build() {
    HdsNavigation() { // 创建HdsNavigation组件
      // HdsNavigation组件内容区
      Scroll(){
        Column({ space: 10 }) {
          Image($r('app.media.mount'))
            .width('100%')
            .height(300)
            .margin({top: 200})
          List({ space: 10 }) {
            ForEach(this.arr, (item: number) => {
              ListItem() {
                Text("item " + item)
                  .fontSize(20)
                  .fontColor(Color.Black)
              }.listCard()

            }, (item: number) => item.toString())
          }
          .padding({ bottom: 30 })
          .edgeEffect(EdgeEffect.Spring)
        }
        .width('100%')
      }
    }.titleBar({
      content: {
        // 设置HdsNavigation组件内容区
        title: { mainTitle: 'MainTitle', subTitle: 'SubTitle' },
        // 设置HdsNavigation StackBuilder区域
        stackBuilder: (): void => this.StackBuilder(),
        // 设置HdsNavigation BottomBuilder区域，包括设置高度，显示类型
        bottomBuilder: {
          builder: (): void => this.BottomBuilder(),
          height: 56,
          showType: BottomBuilderShowType.DIRECTLY_SHOW
        }
      }
    })
    // 设置HdsNavigation标题栏动态显隐，包括设置标题区域，bottomBuilder区域，状态栏区域是否动态隐藏，隐藏模式以及开始隐藏时内容区的滚动距离。
    .dynamicHideTitleBar({ hideTitleArea:true, hideBottomBuilder: true, hideStatusBar: false, mode: HideMode.SCROLL_UP_TO, hideOffset: 10 })
    .backgroundColor(Color.White)
  }
}