鸿蒙应用开发中,Navigation分栏时,重复弹出相同界面该如何处理?
·
Navigation 没有原生接口实现这个效果,只能根据 NavPathStack 提供的接口来手动维护,例如先通过 size 接口判断栈中页面的个数,为 0 就添加,不为 0 就替换,示例如下:
Button('打开 页面2').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
if (this.pathStack.size() == 0) {
this.pathStack.pushPath({ name: 'Page02' });
} else {
this.pathStack.replacePath({ name: 'Page02' });
}
})
效果如下:

完整示例如下:
@Component
struct Page01 {
pathStack: NavPathStack | undefined = undefined;
@State pageId: string = '';
build() {
NavDestination() {
Text(`页面ID: ${this.pageId}`).width('100%').padding(10).fontSize(22)
Button('打开 页面2').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
if (this.pathStack?.size() == 0) {
this.pathStack?.pushPath({ name: 'Page02' });
} else {
this.pathStack?.replacePath({ name: 'Page02' });
}
})
Button('返回').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
this.pathStack?.pop();
})
}.title('页面1')
.onReady((context: NavDestinationContext) => {
this.pathStack = context.pathStack;
this.pageId = context.navDestinationId as string;
})
}
}
@Component
struct Page02 {
pathStack: NavPathStack | undefined = undefined;
@State pageId: string = '';
build() {
NavDestination() {
Text(`页面ID: ${this.pageId}`).width('100%').padding(10).fontSize(22)
Button('打开 页面1').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
if (this.pathStack?.size() == 0) {
this.pathStack?.pushPath({ name: 'Page01' });
} else {
this.pathStack?.replacePath({ name: 'Page01' });
}
})
Button('返回').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
this.pathStack?.pop();
})
}.title('页面2')
.onReady((context: NavDestinationContext) => {
this.pathStack = context.pathStack;
this.pageId = context.navDestinationId as string;
})
}
}
@Entry
@Component
struct Index {
pathStack: NavPathStack = new NavPathStack();
@Builder
pagesMap(name: string) {
if (name == 'Page01') {
Page01()
} else if (name == 'Page02') {
Page02()
}
}
build() {
Navigation(this.pathStack) {
Button('打开 页面1').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
if (this.pathStack.size() == 0) {
this.pathStack.pushPath({ name: 'Page01' });
} else {
this.pathStack.replacePath({ name: 'Page01' });
}
})
Button('打开 页面2').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
if (this.pathStack.size() == 0) {
this.pathStack.pushPath({ name: 'Page02' });
} else {
this.pathStack.replacePath({ name: 'Page02' });
}
})
Button('返回').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
this.pathStack.pop();
})
}.title('主页面')
.titleMode(NavigationTitleMode.Mini)
.navDestination(this.pagesMap)
}
}
更多推荐

所有评论(0)