鸿蒙_组件导航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的区域，而亮色底板没有任何变化，这就是组件导航的原理，可以看成是页面上一个可以独立控制多个子组件切换显示隐藏的特殊组件。

运行效果如下：