鸿蒙NEXT开发-Navigation组件导航

鸿蒙NEXT开发之Navigation组件导航详解

最新推荐文章于 2025-07-16 13:41:33 发布

原创

最新推荐文章于 2025-07-16 13:41:33 发布 · 3.1k 阅读

55 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

1. 基本介绍

Navigation是路由导航的根视图容器，一般作为页面（@Entry）的根容器，包括单栏（Stack）、分栏（Split）和自适应（Auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

注意：页面路由推荐使用Navigation

Navigation的这种跳转方式耦合度较高，不适合大型的项目解耦开发。

2. 子组件

可以包含子组件。

从API Version 9开始，推荐与NavRouter组件配合NavDestination属性进行页面路由

@Entry
  @Component
  struct Index {
    build() {
      Navigation() {
        NavRouter() {
          Row() {
            Button("去A页面")
          }
          .height(60)
          NavDestination() {
            Text("A页面内容")
          }
          .title("A页面")
        }
        NavRouter() {
          Row() {
            Button("去B页面")
          }
          .height(60)
          NavDestination() {
            Text("B页面内容")
          }
          .title("B页面")
        }
      }
      .title("测试")
        .titleMode(NavigationTitleMode.Mini)
    }
  }

从API Version 10开始，推荐使用NavPathStack配合NavDestination属性进行页面路由。

@Entry
  @Component
  struct Index {
    @Provide
    stackPath: NavPathStack = new NavPathStack() // 声明一个pathStack对象

    @Styles
    gridStyle () {
      .height(100)
        .borderRadius(10)
        .backgroundColor(Color.Red)
        .margin(10)

    }
    @Builder
    getPageContent (name: string) {

      if(name === "friend") {
        // 渲染好友组件
        Friend()
      }
      else if(name === "my") {
        // 渲染我的组件
        My()
      }
      else if(name === "connect") {
        // 渲染联系人组件
        Connect()
      }
      else if(name === "chat") {
        // 渲染聊天组件
        Chat()
      }

    }
    build() {
      // 绑定关系
      Navigation(this.stackPath) {
        //  四个导航 导航不同的页面
        // 好友 我的 联系人 聊天
        GridRow ({ columns: 2 }) {
          GridCol() {
            Text("好友")
              .fontColor(Color.White)
          }
          .gridStyle()
            .onClick(() => {
              this.stackPath.pushPathByName("friend", null)
            })
          GridCol() {
            Text("我的")
              .fontColor(Color.White)
          }  .gridStyle()
            .onClick(() => {
              this.stackPath.pushPathByName("my", null)
            })
          GridCol() {
            Text("联系人")
              .fontColor(Color.White)
          }  .gridStyle()
            .onClick(() => {
              this.stackPath.pushPathByName("connect", null)
            })
          GridCol() {
            Text("聊天")
              .fontColor(Color.White)
          }  .gridStyle()
            .onClick(() => {
              this.stackPath.pushPathByName("chat", null)
            })
        }
      }
      .title("主页")
        .titleMode(NavigationTitleMode.Mini)
        .navDestination(this.getPageContent)
    }
  }

@Component
  struct Friend {
    @Consume
    stackPath: NavPathStack
    build() {
      NavDestination() {
        Text("好友组件")
        Button("到我的").onClick((event: ClickEvent) => {
          this.stackPath.replacePathByName("my", null)
        })
      }
      .title("好友")
    }
  }
@Component
  struct My {
    build() {
      NavDestination() {
        Text("我的")
      }
      .title("我的")
    }
  }
@Component
  struct Connect {
    build() {
      NavDestination() {
        Text("联系人")
      }
      .title("联系人")
    }
  }
@Component
  struct Chat {
    build() {
      NavDestination() {
        Text("聊天")
      }
      .title("聊天")
    }