当前位置： 首页 > news >正文

鸿蒙NEXT开发-Navigation组件导航

news 来源：原创 2025/6/25 20:27:46

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

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

目录

1. 基本介绍

2. 子组件

3. 接口

4. 设置页面显示模式

4.1 自适应模式

4.2 单页面模式

4.3 分栏模式

5. 设置标题栏模式

5.1 Mini模式标题栏

5.2 Full模式

6. 路由操作

6.1 初始化代码

6.2 页面跳转

6.3 页面返回

6.4 页面替换

6.5 页面删除

6.6 参数获取

7. 子页面

7.1 页面显示类型

7.2 页面生命周期

8. 小案例

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("聊天")
    }
  }

3. 接口

Navigation()

绑定路由栈到Navigation组件。

Navigation(pathInfos: NavPathStack)

4. 设置页面显示模式

Navigation组件通过mode属性设置页面的显示模式。

分为以下三种：

1、自适应模式（默认）

2、单页面模式

3、分栏模式

4.1 自适应模式

Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当页面宽度大于等于一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。

Navigation() {
  // ...
}
.mode(NavigationMode.Auto)

4.2 单页面模式

将mode属性设置为NavigationMode.Stack，Navigation组件即可设置为单页面显示模式。

Navigation() {
  // ...
}
.mode(NavigationMode.Stack)

4.3 分栏模式

将mode属性设置为NavigationMode.Split，Navigation组件即可设置为分栏显示模式。

Navigation() {
  // ...
}
.mode(NavigationMode.Split)

5. 设置标题栏模式

标题栏在界面顶部，用于呈现界面名称和操作入口，Navigation组件通过titleMode属性设置标题栏模式。

标题栏模式分为以下两种

Mini模式

Full模式

注意：设置标题直接用Navigation().title('标题')即可

5.1 Mini模式标题栏

普通型标题栏，用于一级页面不需要突出标题的场景。

Navigation() {
  // ...
}
.titleMode(NavigationTitleMode.Mini)

5.2 Full模式

强调型标题栏，用于一级页面需要突出标题的场景。

Navigation() {
  // ...
}
.titleMode(NavigationTitleMode.Full)

6. 路由操作

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

6.1 初始化代码

@Entry
  @Component
  struct Index {
    // 创建一个页面栈对象并传入Navigation
    pageStack: NavPathStack = new NavPathStack()

    build() {
      Navigation(this.pageStack) {

      }.title('登录页面') // 设置标题
        .titleMode(NavigationTitleMode.Full) // 设置标题栏模式
    }
  }

6.2 页面跳转

NavPathStack通过Push相关的接口去实现页面跳转的功能，主要分为以下三类:

  1. 普通跳转，通过页面的name去跳转，并可以携带param。
this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")
  1. 带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并进行处理。
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
  console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});
  1. 带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。
this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
  .catch((error: BusinessError) => {
    console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
  }).then(() => {
    console.info('Push destination succeed.');
  });

6.3 页面返回

NavPathStack通过Pop相关接口去实现页面返回功能。

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()

6.4 页面替换

NavPathStack通过Replace相关接口去实现页面替换功能。

// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")

6.5 页面删除

NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

6.6 参数获取

NavPathStack通过Get相关接口去获取页面的一些参数。

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

7. 子页面

NavDestination是Navigation子页面的根容器，用于承载子页面的一些特殊属性以及生命周期等。NavDestination可以设置独立的标题栏和菜单栏等属性，使用方法与Navigation相同。NavDestination也可以通过mode属性设置不同的显示类型，用于满足不同页面的诉求。

7.1 页面显示类型

  • 标准类型

NavDestination组件默认为标准类型，此时mode属性为NavDestinationMode.STANDARD。标准类型的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变化而改变。

  • 弹窗类型

NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型，此时整个NavDestination默认透明显示。弹窗类型的NavDestination显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期，两者可以同时显示。

@Entry
  @Component
  struct Index {
    @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack()

    @Builder
    PagesMap(name: string) {
      if (name == 'DialogPage') {
        DialogPage()
      }
    }

    build() {
      Navigation(this.pageStack) {
        Button('Push DialogPage')
          .margin(20)
          .width('80%')
          .onClick(() => {
            this.pageStack.pushPathByName('DialogPage', '');
          })
      }
      .mode(NavigationMode.Stack)
        .title('Main')
        .navDestination(this.PagesMap)
    }
  }

@Component
  export struct DialogPage {
    @Consume('NavPathStack') pageStack: NavPathStack;

    build() {
      NavDestination() {
        Stack({ alignContent: Alignment.Center }) {
          Column() {
            Text("Dialog NavDestination")
              .fontSize(20)
              .margin({ bottom: 100 })
            Button("Close").onClick(() => {
              this.pageStack.pop()
            }).width('30%')
          }
          .justifyContent(FlexAlign.Center)
            .backgroundColor(Color.White)
            .borderRadius(10)
            .height('30%')
            .width('80%')
        }.height("100%").width('100%')
      }
      .backgroundColor('rgba(0,0,0,0.5)')
        .hideTitleBar(true)
        .mode(NavDestinationMode.DIALOG)
    }
  }

7.2 页面生命周期

Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件事件的形式开放。

其生命周期大致可分为三类，自定义组件生命周期、通用组件生命周期和自有生命周期。

生命周期时序如下图所示：

  • aboutToAppear：在创建自定义组件后，执行其build()函数之前执行（NavDestination创建之前），允许在该方法中改变状态变量，更改将在后续执行build()函数中生效。
  • onWillAppear：NavDestination创建后，挂载到组件树之前执行，在该方法中更改状态变量会在当前帧显示生效。
  • onAppear：通用生命周期事件，NavDestination组件挂载到组件树时执行。
  • onWillShow：NavDestination组件布局显示之前执行，此时页面不可见（应用切换到前台不会触发）。
  • onShown：NavDestination组件布局显示之后执行，此时页面已完成布局。
  • onWillHide：NavDestination组件触发隐藏之前执行（应用切换到后台不会触发）。
  • onHidden：NavDestination组件触发隐藏后执行（非栈顶页面push进栈，栈顶页面pop出栈或应用切换到后台）。
  • onWillDisappear：NavDestination组件即将销毁之前执行，如果有转场动画，会在动画前触发（栈顶页面pop出栈）。
  • onDisappear：通用生命周期事件，NavDestination组件从组件树上卸载销毁时执行。
  • aboutToDisappear：自定义组件析构销毁之前执行，不允许在该方法中改变状态变量。

官方文档地址：文档中心

8. 小案例

从首页跳转到详情页面(用Navigation)

Index.ets

import Detail from './Detail'
import Mine from './Mine'

@Entry
  @Component
  struct Index {
    @Provide pageStack: NavPathStack = new NavPathStack()

    @Builder
    PagesMap(name: string, param: Record<string, string>) {
      if (name == 'Detail') {
        Detail({ param: param['content'] })
      }
      if (name == 'Mine') {
        Mine()
      }
    }

    build() {
      Navigation(this.pageStack) {
        Button('跳转')
          .margin(20)
          .width('80%')
          .onClick(() => {
            this.pageStack.pushPathByName('Detail', new Object({ 'content': '详情页你好呀' }));
          })
      }
      .title('首页')
        .navDestination(this.PagesMap)
    }
  }

Detail.ets

@Component
  export default struct Detail {
    @Consume pageStack: NavPathStack
    param: string = ''

    build() {
      NavDestination() {
        Text(this.param)
        Button("跳转我的页面").margin(20)
          .width('80%').onClick(() => {
            this.pageStack.replacePathByName("Mine", null)
          })
      }.title('详情页')
    }
  }

Mine.ets

@Component
  export default struct Mine {
    @Consume pageStack: NavPathStack

    build() {
      NavDestination() {
        Text('我的')
        Button("跳转详情页面").margin(20)
          .width('80%').onClick(() => {
            this.pageStack.replacePathByName("Detail", new Object({'content':'详情页你好'}))
          })

      }.title('我的')
    }
  }

相关文章：

  • 网站服务器服务商市场营销推广
  • 设计交流的网站制作网页
  • 网站与云平台区别吗怎么样推广自己的网址
  • 三网合一 做网站免费的黄冈网站有哪些平台
  • 怎么去投诉做网站的公司百度快照优化推广
  • 门户网站开发的价格购物网站有哪些
  • Python - Python操作Redis
  • JavaWeb后端基础（1）
  • 【Linux】Linux的基本指令（2）
  • 数据库数据恢复—SQL Server附加数据库报错“错误 823”怎么办？
  • PHP面试题--后端部分
  • 浅谈人工智能之Windows安装llama factory
  • vue使用a-table设置自定义合并字段实现某字段值相同则合并行
  • pyQT5简易教程（一）:制作一个可以选择本地图片并显示的桌面应用
  • 455. 分发饼干（LeetCode）
  • Oracle 数据变化量查询
  • mac下载MAMP6.8.1；解决mac使用小皮面板安装php7.4
  • 动态表头导出EasyExcel
  • 基于C语言对CAPL语法基础的理解
  • 天梯赛：L2-001 紧急救援
  • 6.6.5 SQL访问控制
  • 第16届蓝桥杯模拟赛题解 第三场 Java
  • stm32使用（无线串口）实现收发、判断数据+DMA（HAL库）
  • 2022年全国职业院校技能大赛网络系统管理赛项模块A：网络构建（样题10）-网络部分解析-附详细代码
  • 跨端方案选型：对比Uni-app与Taro在复杂电商项目中的技术选型依据参考
  • 大白话解释负载均衡Nginx是什么 有什么用 怎么用#