HarmonyOS鸿蒙Next中可以实现这种自定义的导航栏效果吗

CSxiangce

@Entry
@ComponentV2
struct CSxiangce {
  @Local message: string = 'Hello World';
  private daohangqi:NavPathStack = new NavPathStack();
  private yuansuzu:string[] = ['壹','贰','叁','肆','伍','陆','柒','捌','玖','拾']

  build() {
    Stack(){
      Navigation(this.daohangqi){
        WaterFlow(){
          ForEach(this.yuansuzu, (i:string) => {
            ForEach(this.yuansuzu, (i:string) => {
              FlowItem(){
                Text(i)
                  .height('50')
                  .width('50')
                  .borderRadius(50)
                  .backgroundColor('#ff2f88ef')
                  .textAlign(TextAlign.Center)
              }
              .onClick(() => {
                this.daohangqi.pushDestinationByName('',{})
              })
            })
          })
        }
        .height("100%")
        .width('100%')
        .columnsTemplate('1fr 1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
        .align(Alignment.Center)
        .rowsGap(50)
      }
      .height('100%')
      .width('100%')
      .navDestination(csXiangqing)

      Column(){
        Row(){
          Button('主页')
            .width(70)
            .height(50)

          Button('添加')
            .width(70)
            .height(50)

          Button('目/详')
            .width(70)
            .height(50)

        }
        .height(80)
        .margin({bottom:50})
        .width('80%')
        .borderRadius(50)
        .justifyContent(FlexAlign.SpaceAround)
        .backgroundColor('#ff709f79')
      }
      .height('100%')
      .width('100%')
      .justifyContent(FlexAlign.End)
      .hitTestBehavior(HitTestMode.Transparent)
    }
    .height('100%')
    .width('100%')
  }
}

@Builder
function csXiangqing(){
  xiangqingye()
}

@ComponentV2
struct xiangqingye{
  private daohangqi:NavPathStack = new NavPathStack();

  build() {
    NavDestination(){
      Column(){
        Text('这是详情页')
      }
      .height('100%')
      .width('100%')
    }
    .height('100%')
    .width('100%')
    .onReady((e:NavDestinationContext) => {
      if (e?.pathStack) {
        this.daohangqi = e.pathStack;
      }
    })
  }
}

效果截图

点击“首/详”按钮、列表元素，都可以跳转子页面。