HarmonyOS鸿蒙Next中Navigation可以嵌套Navigation吗？

//Index.ets import { PageOneTmp } from ‘./PageOne’ import { pageTwoTmp } from ‘./PageTwo’ import { Pages } from ‘./PageTwo’ @Entry @Component struct TabsExample { @State fontColor: string = ‘#182431’ @State selectedFontColor: string = ‘#007DFF’ @State currentIndex: number = 0 private controller: TabsController = new TabsController() @Builder tabBuilder(index: number, name: string) { Column() { Text(name) .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) .fontSize(16) .fontWeight(this.currentIndex === index ? 500 : 400) .lineHeight(22) .margin({ top: 17, bottom: 7 }) Divider() .strokeWidth(2) .color(’#007DFF’) .opacity(this.currentIndex === index ? 1 : 0) } .width(‘100%’) } @Provide(‘pageInfos’) pageInfos: NavPathStack = new NavPathStack() @Builder PageMap(name: string) { if (name === ‘pageOne’) { PageOneTmp() } else if (name === ‘pageTwo’) { pageTwoTmp({ names: name, values: this.pageInfos } as Pages) } } build() { Column() { Navigation(this.pageInfos) { Column() { Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) { TabContent() { Column() { Button(‘pushPath’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20) .onClick(() => { this.pageInfos.pushPath({ name: ‘pageOne’ }) //将name指定的NavDestination页面信息入栈 }) } .width(‘100%’) .height(‘100%’) .backgroundColor(’#ff8aa941’) } .tabBar(this.tabBuilder(0, ‘green’)) TabContent() { Column() { Button(‘pushPath2’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20) .onClick(() => { this.pageInfos.pushPath({ name: ‘pageOne’ }) //将name指定的NavDestination页面信息入栈 }) } .width(‘100%’) .height(‘100%’) .backgroundColor(’#007DFF’) } .tabBar(this.tabBuilder(1, ‘blue’)) TabContent() { Column() .width(‘100%’) .height(‘100%’) .backgroundColor(’#FFBF00’) } .tabBar(this.tabBuilder(2, ‘yellow’)) TabContent() { Column() .width(‘100%’) .height(‘100%’) .backgroundColor(’#E67C92’) } .tabBar(this.tabBuilder(3, ‘pink’)) } .vertical(false) .barMode(BarMode.Fixed) .barWidth(360) .barHeight(56) .animationDuration(400) .onChange((index: number) => { this.currentIndex = index }) .width(360) .height(‘100%’) .backgroundColor(’#F1F3F5’) } } .title(‘NavIndex’).navDestination(this.PageMap) .onNavBarStateChange((isVisible: boolean) => { console.info('test: == ’ + isVisible + '; currentIndex = ’ + this.currentIndex); }); } .width(‘100%’) } }

//PageOne.ets class TmpClass { count: number = 10 } @Component export struct PageOneTmp { @Consume(‘pageInfos’) pageInfos: NavPathStack; build() { NavDestination() { Column() { Button(‘pushPathByName’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20) .onClick(() => { let tmp = new TmpClass() this.pageInfos.pushPathByName(‘pageTwo’, tmp) //将name指定的NavDestination页面信息入栈，传递的数据为param }) Button(‘popToname’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20) .onClick(() => { this.pageInfos.popToName(‘pageTwo’) //回退路由栈到第一个名为name的NavDestination页面 console.log(‘popToName’ + JSON.stringify(this.pageInfos), ‘返回值’ + JSON.stringify(this.pageInfos.popToName(‘pageTwo’))) }) Button(‘popToIndex’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20) .onClick(() => { this.pageInfos.popToIndex(1) // 回退路由栈到index指定的NavDestination页面 console.log(‘popToIndex’ + JSON.stringify(this.pageInfos)) }) Button(‘moveToTop’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20) .onClick(() => { this.pageInfos.moveToTop(‘pageTwo’) // 将第一个名为name的NavDestination页面移到栈顶 console.log(‘moveToTop’ + JSON.stringify(this.pageInfos), ‘返回值’ + JSON.stringify(this.pageInfos.moveToTop(‘pageTwo’))) }) Button(‘moveIndexToTop’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20) .onClick(() => { this.pageInfos.moveIndexToTop(1) // 将index指定的NavDestination页面移到栈顶 console.log(‘moveIndexToTop’ + JSON.stringify(this.pageInfos)) }) Button(‘clear’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20) .onClick(() => { this.pageInfos.clear() //清除栈中所有页面 }) Button(‘get’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20).onClick(() => { console.log(’-------------------’) console.log(‘获取栈中所有NavDestination页面的名称’, JSON.stringify(this.pageInfos.getAllPathName())) console.log(‘获取index指定的NavDestination页面的参数信息’, JSON.stringify(this.pageInfos.getParamByIndex(1))) console.log(‘获取全部名为name的NavDestination页面的参数信息’, JSON.stringify(this.pageInfos.getParamByName(‘pageTwo’))) console.log(‘获取全部名为name的NavDestination页面的位置索引’, JSON.stringify(this.pageInfos.getIndexByName(‘pageOne’))) console.log(‘获取栈大小’, JSON.stringify(this.pageInfos.size())) }) } .width(‘100%’) .height(‘100%’) .backgroundColor(Color.Pink) .onBackPressed(() => { const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素 console.log(‘pop’ + ‘返回值’ + JSON.stringify(popDestinationInfo)) return true }) } .title(‘pageOne’) .width(‘100%’) .height(‘100%’) .backgroundColor(Color.Pink) .onBackPressed(() => { return true }) } }

//PageTwo.ets export class Pages { names: string = “” values: NavPathStack | null = null } @Builder export function pageTwoTmp(info: Pages) { NavDestination() { Column() { Button(‘pushPathByName’, { stateEffect: true, type: ButtonType.Capsule }) .width(‘80%’) .height(40) .margin(20) .onClick(() => { (info.values as NavPathStack).pushPathByName(‘pageOne’, null) }) } .width(‘100%’) .height(‘100%’) } .title(‘pageTwo’) .onBackPressed(() => { (info.values as NavPathStack).pop() return true }) }