HarmonyOS鸿蒙Next中如何给SideBarContainer加上标题栏？

HarmonyOS鸿蒙Next中如何给SideBarContainer加上标题栏？ 我通过学习这个指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-navigation-tabs已经学会了用SideBarContainer，但是我现在想给页面加上标题栏。

我从https://developer.huawei.com/consumer/cn/doc/design-guides/titlebar-0000001929628982这个指南学习了标题栏的一些知识，发现我想实现的就是文中描述的这样的界面：

cke_7500.png

但是我不知道怎么加上这个标题栏，是必须要使用Navigation吗？


更多关于HarmonyOS鸿蒙Next中如何给SideBarContainer加上标题栏？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

当前SideBarContainer侧边栏暂时不支持直接设置标题栏，需要配合Navigation或者自定义builder实现，HMRouter底层对系统Navigation进行封装，也可以使用HMRouter设置路由和页面。

【背景知识】

HMRouter作为应用内页面跳转场景解决方案，聚焦解决应用内ArkUI页面的跳转逻辑。 HMRouter底层对系统Navigation进行封装，集成了Navigation、NavDestination、NavPathStack的系统能力，提供了可复用的路由拦截、页面生命周期、自定义转场动画，并且在跳转传参、额外的生命周期、服务型路由方面对系统能力进行了扩展。 HMRouter三方框架介绍

【解决方案】

使用HMNavigationOption中的title : NavTitle可以设置页面标题栏。 HMNavigationOption使用 可参考demo：

import { HMNavigation } from '@hadss/hmrouter';
import { AttributeUpdater } from '@kit.ArkUI';

class NavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.mode(NavigationMode.Stack);
    instance.navBarWidth('100%');
    instance.titleMode(NavigationTitleMode.Mini)
    instance.hideBackButton(true)
  }
}

@Entry
@Component
struct HMRouterPage {
  static readonly TAG = 'HMRouterPage'
  modifier: NavModifier = new NavModifier()
  @State loading: boolean = false

  build() {
    Column() {
      HMNavigation({
        homePageUrl: '',
        navigationId: 'mainNavigation',
        options: {
          modifier: this.modifier,
          title: { titleValue: "首页" },
          menus: [{
            value: "menu1",
          }],
          toolbar: [
            {
              value: "首页" ,
            },
          ]
        }
      })
    }.width('100%').height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中如何给SideBarContainer加上标题栏？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过自定义组件实现SideBarContainer的标题栏。使用@Entry和@Component装饰器创建自定义组件，在build方法中嵌入SideBarContainer，并在其上方或侧边添加Text或Row组件作为标题栏。通过布局属性控制标题栏位置与样式，例如使用Flex布局或固定定位。具体实现需结合ArkTS声明式UI语法，调整组件结构与样式属性完成集成。

在HarmonyOS Next中，为SideBarContainer添加标题栏不需要强制使用Navigation组件。可以通过以下方式实现：

  1. 使用Column布局组合：将SideBarContainer与自定义标题栏组件（如Text或Row）组合在Column容器中：
Column() {
  // 自定义标题栏
  Row() {
    Text('页面标题')
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
  }
  .width('100%')
  .padding(12)
  .backgroundColor('#F1F3F5')

  // SideBarContainer
  SideBarContainer(SideBarContainerType.Embed)
    .controlButton({left:32})
    .maxSideBarWidth(240)
    .minContentWidth(360)
    .sideBarWidth(150)
    .showSideBar(this.isShow)
    .builder(this.sideBarBuilder, this.contentBuilder)
}
  1. 标题栏交互控制：可通过标题栏按钮控制SideBar显隐：
Row() {
  Text('页面标题').fontSize(20)
  Blank()
  Button(this.isShow ? '隐藏' : '显示')
    .onClick(() => {
      this.isShow = !this.isShow
    })
}

这种方式比引入Navigation更轻量，且能完全自定义标题栏样式和交互逻辑。

回到顶部