概述

Harmony Next开发Navigation页面跳转

知识点

1. Navigation通过NavPathStack路由跳转
2. Navigation以弹窗的方式打开NavDestination页面
3. Menu配置

组件

NavTest

@Entry
@Component
struct NavTest {
  @Provide pageInfos: NavPathStack = new NavPathStack()

  @Builder PageMap(name: string){
    if (name === "pageOne") {
      PageOneBuilder()
    } else if (name === "pageTwo") {
      PageTwoBuilder()
    } else if(name==='pageDialog') {
      pageDialogBuilder()
    }
  }

  build() {
    Column(){
      Navigation(this.pageInfos){
        Column({ space: 20 }){

          Text('Navigation Demo').fontSize(30)

          Button("PageOne").onClick(()=>{
            this.pageInfos.pushPathByName('pageOne', null)
          })

          Button("PageTwo").onClick(()=>{
            this.pageInfos.pushPathByName('pageTwo', null)
          })

          Button("弹出页面").onClick(()=>{
            this.pageInfos.pushPathByName('pageDialog', null)
          })

        }.width('100%')

      }.mode(NavigationMode.Stack)
      .title("Navigation")
      .menus([
        {value: "设置", icon: "pages/startIcon.png", action: ()=> {}},
        {value: "更多", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "菜单1", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "菜单2", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "菜单3", icon: "./image/ic_public_add.svg", action: ()=> {}},
      ])
      .height('100%')
      .width('100%')
      .navDestination(this.PageMap)
      .titleMode(NavigationTitleMode.Mini)

    }
  }
}

PageOne

@Builder
export function PageOneBuilder(){
  pageOneTmp()
}

@Component
export struct pageOneTmp {
  
  @Consume('pageInfos') pageInfos: NavPathStack

  build() {

    NavDestination() {
      Column({ space: 10 }) {
        Text("这是PageOne页面")
        Button('Back').onClick(() => {
          this.pageInfos.pop()
        })
      }.width('100%').height('100%')
    }
    .title('NavDestinationTitle1')
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop()
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })

  }
}

PageTwo

@Component
export struct PageTwoBuilder {
  @Consume('pageInfos') pageInfos: NavPathStack

  build() {

    NavDestination() {
      Column({ space: 10 }) {
        Text("这个PageTwo页面")
      }.width('100%').height('100%')
    }
    .title('NavDestinationTitle2')
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop()
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })

  }
}

pageDialog

@Builder
export function pageDialogBuilder(){
  pageDialog()
}

@Component
struct pageDialog {
  @Consume('pageInfos') pageInfos: NavPathStack

  build() {
    NavDestination() {
      Column({ space: 20 }) {
        Text('弹出页面测试, Dialog NavDestination').fontSize(20)
        Button('Back').onClick(() => {
          this.pageInfos.pop()
        })
      }
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.White)
      .borderRadius(10)
      .width('100%')
      .height('100%')
    }
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
    .width('100%')
    .height('100%')
    .backgroundColor('rgba(0,0,0,0.5)')
    .border({ style: BorderStyle.Solid, color: 'red', width: 1 })
  }
}

效果图