鸿蒙应用开发中,Navigation初始时单栏跳转后双栏
·
在宽屏设备上,Navigation的mode默认处于Split模式(双栏),但是可以通过设置mode的值来切换单双栏,这里通过AttributeModifier<NavigationModifier>来改变Navigation各属性的值,示例如下:
class NavigationMainModifier implements AttributeModifier<NavigationModifier> {
navigationMode: NavigationMode = NavigationMode.Auto;
// 成员变量navigationMode的值改变时,会自动调用此方法
applyNormalAttribute(instance: NavigationModifier): void {
instance.mode(this.navigationMode)
}
}
@Entry
@Component
struct StartPage {
@State navigationMainModifier: NavigationMainModifier = new NavigationMainModifier();
......
aboutToAppear(): void {
this.pathStack.setInterception({
willShow: (from: NavDestinationContext | NavBar, to: NavDestinationContext | NavBar) => {
// 由首页发起的跳转,切换成双栏模式
if (from == 'navBar') {
this.navigationMainModifier.navigationMode = NavigationMode.Split;
// 跳转到首页,切换成单栏模式
} else if (to == 'navBar') {
this.navigationMainModifier.navigationMode = NavigationMode.Stack;
}
}
})
}
build() {
Navigation(this.pathStack) {
......
}.title('主页面')
.attributeModifier(this.navigationMainModifier)
}
}
效果如下:

完整示例如下:
import { NavigationModifier } from "@kit.ArkUI";
class NavigationMainModifier implements AttributeModifier<NavigationModifier> {
navigationMode: NavigationMode = NavigationMode.Auto;
// 成员变量navigationMode的值改变时,会自动调用此方法
applyNormalAttribute(instance: NavigationModifier): void {
instance.mode(this.navigationMode)
}
}
@ComponentV2
struct Page01 {
pathStack: NavPathStack | undefined = undefined;
build() {
NavDestination() {
Button('push 页面1').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
this.pathStack?.pushPath({ name: 'Page01' });
})
Button(`pop`).width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
this.pathStack?.pop();
})
}.title('页面1')
.onReady((context: NavDestinationContext) => {
this.pathStack = context.pathStack;
})
}
}
@Entry
@Component
struct StartPage {
pathStack: NavPathStack = new NavPathStack();
@State navigationMainModifier: NavigationMainModifier = new NavigationMainModifier();
@Builder
pagesMap(name: string) {
if (name == 'Page01') {
Page01()
}
}
aboutToAppear(): void {
this.pathStack.setInterception({
willShow: (from: NavDestinationContext | NavBar, to: NavDestinationContext | NavBar) => {
// 由首页发起的跳转,切换成双栏模式
if (from == 'navBar') {
this.navigationMainModifier.navigationMode = NavigationMode.Split;
// 跳转到首页,切换成单栏模式
} else if (to == 'navBar') {
this.navigationMainModifier.navigationMode = NavigationMode.Stack;
}
}
})
}
build() {
Navigation(this.pathStack) {
Column() {
Button('push 页面1').width('80%').margin({ top: 10, bottom: 10 })
.onClick(() => {
this.pathStack.pushPath({ name: 'Page01' });
})
}
}.title('主页面')
.titleMode(NavigationTitleMode.Mini)
.mode(NavigationMode.Stack)
.attributeModifier(this.navigationMainModifier)
.navDestination(this.pagesMap)
}
}
更多推荐

所有评论(0)