鸿蒙：Navigation的基本使用

原创

已于 2024-07-23 11:41:24 修改 · 4.6k 阅读

51 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙

于 2024-07-22 16:29:25 首次发布

注：本章只是简单介绍一下其用法，详情请看官方文档：

Navigation：文档中心

1. Navigation：

Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

NavRouter ：导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。必须包含两个子组件，其中第二个子组件必须为NavDestination。

NavDestination：作为子页面的根容器，用于显示Navigation的内容区。

1.1 Navigation + NavRouter + NavDestination实现组件跳转（API9）

Navigation内书写的是页面的内容，是Navigation实现页面跳转最外层的跟容器，如果嵌套NavRouter，NavRouter下需要嵌套两个子组件，第一个子组件自定义，点击可以跳转到第二个子组件，第二个必须为NavDestination包裹的子组件，用于显示跳转目标组件的内容。详情看代码：

@Entry
@Component
struct NavigationAPI9 {
  build() {
    Column() {
      Navigation() {
        Text('页面1')
        NavRouter() {
          // 只能写一个组件，写的多了，后面替换前面
          Button('按钮1')
          Button('按钮2')
          NavDestination() {
            Text('页面2')
            NavRouter() {
              Button('按钮3')
              NavDestination() {
                Text('页面3')
                NavRouter() {
                  // .....
                }
              }
            }
          }
        }
      }
    }
    .height('100%')
    .width('100%')
  }
}

效果如下：