HarmonyOS鸿蒙Next标题栏组件

鸿蒙提供了很多呀内置标题栏组件。支持自定义标题、返回按钮、菜单等交互元素。

系统内置的

**Navigation组件：**支持 Mini/Full 模式，可配置主副标题、菜单按钮和返回键：

Navigation() {

  // 页面内容

}

.titleMode(NavigationTitleMode.Full)  // 设置标题栏模式

.title({ mainTitle: '主页', subTitle: '子标题' }) 

.menus([ 

  { icon: "resources/base/media/icon_setting.svg", action: () => {} }, 

  { icon: $r('app.media.icon_search'), action: () => {} } 

]) // 设置右侧菜单图标 

** ComposeTitleBar 组件**：专为标题栏设计的独立组件，支持 标题、副标题、菜单项

ComposeTitleBar({ 

  title: '个人中心', 

  subtitle: 'HarmonyOS', 

  menuItems: [ 

    { icon: $r('app.media.icon_share'), action: () => {} } 

  ] 

}) // 必填title，可选subtitle和menuItems 

**HdsNavigation 组件：**通过 stackBuilder 和 bottomBuilder 实现高度自定义

HdsNavigation() 

  .titleBar({ 

    content: { 

      title: { mainTitle: '设置' }, 

      stackBuilder: () => this.CustomHeader(), // 自定义顶部区域 

      bottomBuilder: { 

        builder: () => SearchComponent(), // 添加底部搜索框 

        height: 56 

      } 

    } 

  }) // 支持动态扩展标题栏区域 

自定义标题栏

通过 @Component 封装组件，结合 Row、Text、Button 等基础组件进行构建

[@Component](/user/Component) 

struct CustomTitleBar { 

  @Prop title: string 

  build() { 

    Row() { 

      Button($r('sys.symbol.arrow_left')) // 返回按钮 

      Text(this.title).fontSize(20)        // 标题 

      Button($r('app.media.icon_more'))   // 右侧菜单 

    } 

  } 

} // 使用时直接调用 <CustomTitleBar title='我的页面'/>