Harmony Next开发Navigation页面跳转

概述

知识点

Navigation通过NavPathStack路由跳转
Navigation以弹窗的方式打开NavDestination页面
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: NavPathStackbuild() {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: NavPathStackbuild() {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: NavPathStackbuild() {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 })}
}