鸿蒙_组件导航Navigation的原理

在鸿蒙应用的开发中我们知道独立页面的创建一般都是在DevEco Studio中通过“新建-Page-Empty Page”生成的这种页面是基本的入口页面做过网站开发的都知道这可以看成是类似网站中的一个独立网页html页面那么组件导航又是什么呢可以看成是在一个html页面内多个的“div层”但同时只显示一个单页面应用宿主就是当前所在的页面。如果你还是没有明白那么我们通过新建一个TestNavigation页面来测试一下Entry Component struct TestNavigation { State message: string Test Navigation Page; //定义一个页面栈用于管理页面记录页面路径信息及访问顺序等 navPathStack: NavPathStack new NavPathStack() //自定义构建函数用来承载多个页面内容 Builder builderPages(name: string) { if (name pageOne) { //页面1内容要放到导航目标内 NavDestination() { Text(NavDestination:pageOne).fontColor(Color.Red) } } else if (name pageTwo) { //页面2内容也要放到导航目标内 NavDestination() { Row() { Text(NavDestination:pageTwo).fontColor(Color.Orange) } } } } build() { Column() { Text(this.message) .fontSize(26) .fontWeight(FontWeight.Bold) .onClick(() { this.message Welcome; }) //组件导航参数必传页面栈 Navigation(this.navPathStack) { //这里写根页面 Text(Navigation Root Page) .fontSize(22) .margin({ top: 30, bottom: 10 }) Button(pushPath pageOne, { stateEffect: true, type: ButtonType.Capsule }) .width(80%) .margin(20) .onClick(() { this.navPathStack.pushPath({ name: pageOne }); }) Button(pushPath pageTwo, { stateEffect: true, type: ButtonType.Capsule }) .width(80%) .onClick(() { this.navPathStack.pushPath({ name: pageTwo }); }) } .navDestination(this.builderPages) //这里也是必须加的传多个页面的构建函数 .border({ width: 1, color: Color.Black }) .margin(30) .backgroundColor(Color.Pink) } .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) .padding(10) .expandSafeArea( [SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM] ) .backgroundColor(Color.Yellow) .height(100%) .width(100%) } }在本次的测试中我们把Navigation放到页面中并且设置了一个足够大的外边距margin并用底色加以区分可以看到亮色的部分为Test NavigationPage底板而Navigation包裹起来的整体作为承载了组件导航的区域图一粉色部分当我们点击“pushPath pageOne”按钮时会触发组件导航内部目标页的跳转到二级页面图二白色部分但是始终都没有超出Navigation的区域而亮色底板没有任何变化这就是组件导航的原理可以看成是页面上一个可以独立控制多个子组件切换显示隐藏的特殊组件。运行效果如下