HarmonyOS navigation如何实现在NavDestination内实现分栏？

Question

如题：HarmonyOS navigation如何实现在NavDestination内实现分栏？

Answer 1

参考示例：

import { RouterManager } from 'router';

@Preview
@Component
export struct Bpage {
  @State message: string = '广告详情页----B';
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    NavDestination() {
      Navigation(){
        Column(){
          Column() {
            Text(this.message)
              .fontSize(15)
              .fontWeight(FontWeight.Bold)
          }
          .width('100%')
        }
        Button('To main pageA')

        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              NavRouter() {
                Text('' + item)
                  .width('90%')
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)

                NavDestination() {
                  Text("NavDestination_text" + item)
                }
                .title("NavDestination_title")
                .mode(NavDestinationMode.STANDARD)
              }
            }

          }, (item: number) => item.toString())
        }
        .width('100%')
        .margin({ top: 12, left: '10%' })
      }
      .mode(NavigationMode.Split)
      .navBarWidth(150)

    }
    .onBackPressed(()=>{
      RouterManager.navPathStack.removeByName('Bpage') //广告详情页
      RouterManager.navPathStack.removeByName('loginPageView') // 开屏广告页
      RouterManager.navPathStack.pushPathByName('loginSuccess',true) // 新闻首页
      return true
    })
    .hideTitleBar(true)
    .height('100%')
  }
}

@Builder
export function getBpage(): void {
  Bpage();
}