HarmonyOS鸿蒙Next中如何把SideBarContainer的controlButton放进标题栏里？

【背景知识】 抽屉型标题栏用于展示不同的分类，可以快捷地进行切换、查找。抽屉型在不同尺寸设备上呈现的效果略有差异，手机端为侧边遮罩层，平板端等大屏设备为分栏界面布局。通常效率型、办公类及内容型应用较为常用。抽屉标题栏需要配合Sidebarcontainer结合使用。

HMRouter底层对系统Navigation进行封装，集成了Navigation、NavDestination、NavPathStack的系统能力，提供了可复用的路由拦截、页面生命周期、自定义转场动画，并且在跳转传参、额外的生命周期、服务型路由方面对系统能力进行了扩展，同时开发者可以高效的将历史代码中的Navigation组件接入到HMRouter框架中。

【解决方案】 先使用ohpm安装依赖如下：

ohpm install @hadss/hmrouter

Index.ets文件：

import {Index2} from './TabPage'

@Entry
@Component
struct SideBarContainerExample {
  normalIcon: Resource = $r("app.media.startIcon");
  selectedIcon: Resource = $r("app.media.startIcon");
  @State arr: number[] = [1, 2, 3];
  @State current: number = 1;

  build() {
    SideBarContainer(SideBarContainerType.Embed) {
      Column() {
        ForEach(this.arr, (item: number) => {
          Column({ space: 5 }) {
            Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
            Text("Index0" + item)
              .fontSize(25)
              .fontColor(this.current === item ? '#0A59F7' : '#999')
              .fontFamily('source-sans-pro,cursive,sans-serif')
          }
          .onClick(() => {
            this.current = item;
          })
        }, (item: string) => item)
      }.width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#19000000')
      Index2()
    }
    .controlButton({
      top: 10,
    })
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) => {
    })
    .divider({ strokeWidth: '1vp', color: Color.Gray, startMargin: '4vp', endMargin: '4vp' })
  }
}

TabPage.ets文件：

import { AttributeUpdater, LengthMetrics } from '@kit.ArkUI';
import { HMDefaultGlobalAnimator, HMNavigation, HMRouterMgr } from '@hadss/hmrouter';

/**
 * 界面样式公用函数
 */
class NavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.mode(NavigationMode.Stack);
    instance.navBarWidth('100%');
    instance.titleMode(NavigationTitleMode.Mini)
    instance.hideBackButton(true)
  }
}

interface BuildRooms {
  name: string
}

@Entry
@Component
struct Index2 {
  modifier: NavModifier = new NavModifier();
  private param: BuildRooms = {
    name: "sy"
  };
  @State startPadding:number = 50
  build() {
    // @Entry中需要再套一层容器组件,Column或者Stack
    Column() {
      // 使用HMNavigation容器
      HMNavigation({
        homePageUrl: '',
        navigationId: 'mainNavigation',
        options: {
          modifier: this.modifier,
          title: { titleValue:  "Title", titleOptions: {paddingStart:LengthMetrics.vp(this.startPadding)} },
          menus: [{
            value: "menu1",
          }],
          toolbar: [
            {
              value: "首页" ,
            },
          ]
        }
      })
      {
        Row() {
          Text("点击跳转")
            .fontSize(50)
            .onClick(() => {
              HMRouterMgr.push({ pageUrl: 'pageB' })
            })
        }
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Yellow)
        .justifyContent(FlexAlign.Center)
      }
    }
    .height('100%')
    .width('100%')
  }
}

export { Index2 };