HarmonyOS：通过组件导航设置自定义区域

ChinaDragon2026-01-07 9:25

一、场景介绍

从6.0.0(20) Beta1版本开始，导航组件新增支持设置标题栏stackBuilder 以及bottomBuilder 。

当应用开发者需要在标题栏区域增加自定义节点时，例如在标题栏上方区域增加分段按钮，标题栏底部区域增加搜索框、页签时，可以使用标题栏自定义区域设置能力。

二、开发示例

效果图

示例代码 TestUIDesign4.ets

bash 复制代码

import { HdsNavigation, BottomBuilderShowType } from '@kit.UIDesignKit';
@Entry
@Component
struct TestUIDesign4 {
  @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组件
    }.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
        }
      }
    })
    .backgroundColor(Color.White)
  }
}