鸿蒙5.0开发：ArkUI组件（Navigation）

最新推荐文章于 2025-06-27 16:39:33 发布
原创 最新推荐文章于 2025-06-27 16:39:33 发布 · 832 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #驱动开发 #嵌入式硬件

 往期鸿蒙全套实战文章必看：

🚀一、Navigation

Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。

模式描述优点缺点
单页面模式整个网站只有一个页面，所有信息都在该页面内呈现页面加载速度快，交互性强，用户体验好不适合复杂的网站和内容
分栏模式将页面分成多栏，同时在每栏中显示不同的内容可以在有限的页面空间中展现更多的信息，提高页面的可读性和视觉吸引力页面结构复杂，不易维护和更新
自适应模式根据不同的设备和屏幕大小，自动调整和优化页面布局和内容具有良好的适应性和响应性，适合各种设备和平台页面设计和开发难度较大，需要更多的技术支持

在Navigation组件中，页面分为主页和内容页。主页由标题栏、内容区和工具栏组成，并且可以使用NavRouter子组件实现导航栏功能。内容页则主要显示NavDestination子组件中的内容。

NavRouter是Navigation组件中的特殊子组件，通常用于与Navigation组件配合使用，它默认提供了点击响应处理，不需要开发者自定义点击事件逻辑。NavRouter组件只有两个子组件，其中第二个子组件必须是NavDestination。而NavDestination则是Navigation组件中的特殊子组件，用于显示内容页的内容。当开发者点击NavRouter组件时，会跳转到对应的NavDestination内容区。

🔎1.设置页面显示模式

🦋1.1 自适应模式

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

mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。

🦋1.2 单页面模式

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主标题")
      .mode(NavigationMode.Stack)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolBar({items: [
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

页面结构如下：
在这里插入图片描述
实际效果：
在这里插入图片描述
注意：菜单栏图片不存在可能会出现问题

🦋1.3 分栏模式

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主标题")
      .mode(NavigationMode.Split)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolBar({items: [
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

页面结构如下：
在这里插入图片描述

理论效果：
在这里插入图片描述

实际效果：
在这里插入图片描述
注意：菜单栏图片不存在就会出现如上问题

🔎2.设置标题栏模式

🦋2.1 Mini模式

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

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主标题")
      .titleMode(NavigationTitleMode.Mini)
      .mode(NavigationMode.Split)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolBar({items: [
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

在这里插入图片描述

🦋2.2 Full模式

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

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主标题")
      .titleMode(NavigationTitleMode.Full)
      .mode(NavigationMode.Split)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolBar({items: [
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

在这里插入图片描述
注意：菜单栏图片不存在就会出现如上问题

🔎3.设置菜单栏

1、设置了3个图标的菜单栏

Navigation() {
  ...
}
.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])

在这里插入图片描述
2、设置了4个图标的菜单栏
在这里插入图片描述

Navigation() {
  ...
}
.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])

🔎4.设置工具栏

Navigation() {
  ...
}
.toolBar({items:[
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}]})

在这里插入图片描述

【鸿蒙实战开发】基于Navigation的路由管理
HarmonyOSMN的博客
06-27 6888
Navigation由NavDestination组件组成页面路由，在实现过程中NavDestination组件会被封装在一个自定义组件中，从而作为一个页面被路由栈使用。当前支持的生命周期函数：aboutToAppear、onReady、onAppear、onShow、onHide、onDisappear、aboutToDisappear 、onWillAppear、onWillDisappear。
【鸿蒙开发基础学习】组件导航 (Navigation)
专注移动开发
08-09 2156
Navigation 通过 customNavContentTransition 事件提供自定义转场动画的能力，通过如下三步可以定义一个自定义的转场动画。
【愚公系列】2023年12月 HarmonyOS教学课程 025-ArkUI组件（Navigation）
热门推荐
时光隧道
12-11 6万+
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
鸿蒙开发——Navigation路由组件使用
最新发布
duoduola666的博客
06-27 2045
使用了插件和路由库之后，在每个Module下都会生成一个路由配置文件，以Module名字+RouterConfig为文件命名，此路由配置文件，也会在AbilityStage中，通过routerInitConfig方法进行自动配置。子页面注解的作用很简单，用来标记页面的唯一标识，也就是别名，要求格式为：Module名字+下划线+定义的别名。如entry Module下：entry_test1,entry_test2等等如test Module下：test_test1,test_test2等等。
鸿蒙开发：Navigation路由组件使用由繁入简
知足常乐
10-12 1226
无论是静态配置还是动态配置，都有着手动配置的需要，本篇文章就是要解决手动配置，利用路由库和插件实现自动配置的需求。
鸿蒙开发-UI-组件导航-Navigation
中年程序员
02-02 3330
上文详细学习了鸿蒙开发UI页面跳转的相关知识，学习页面路由router基本概念，使用方法，页面路由两种跳转模式和两种实例模式的区别以及不同跳转模式和实例模式组合下的使用场景，学习了页面跳转后普通返回和带弹窗的返回使用方法，学习了页面带数据的跳转方式以及目标页面接收数据的方法，本文将学习鸿蒙UI开发组件导航Navigation。
鸿蒙5.0版开发：ArkUI框架-管理应用窗口（FA模型）
m0_73088370的博客
11-21 1054
窗口沉浸式能力：指对状态栏、导航栏等系统窗口进行控制，减少状态栏导航栏等系统界面的突兀感，从而使用户获得最佳体验的能力。
鸿蒙5.0版开发：ArkUI框架-使用XComponent实现画中画功能开发
m0_73088370的博客
11-22 870
本文以视频播放为例，介绍通过XComponent实现画中画功能的基本开发步骤。
鸿蒙5.0版开发：ArkTS组件-基础组件（NavRouter）
m0_69424697的博客
09-14 1017
导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。
鸿蒙5.0版开发：ArkUI框架-管理应用窗口（Stage模型）
m0_73088370的博客
11-21 905
悬浮窗口可以用于应用退至后台后，使用小窗继续播放视频，或者为特定的应用创建悬浮球等快速入口。
鸿蒙5.0版开发：ArkTS组件-Navigation
m0_69424697的博客
11-07 1264
Navigation组件是路由导航的根视图容器...........
鸿蒙NEXT开发-Navigation组件导航
东林知识库
02-26 3064
鸿蒙Navigation组件导航的学习，包含了基本介绍和里面一些属性的介绍，最后用一个小案例总结！
鸿蒙：Navigation的基本使用
m0_46924916的博客
07-22 4547
注：本章只是简单介绍一下其用法，详情请看官方文档：Navigation：文档中心Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。NavRouter ：导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。必须包含两个子组件，其中第二个子组件必须为NavDestination。Nav
【鸿蒙】Navigation的使用（路由跳转）
qq_22015625的博客
12-09 1067
NavDestination的生命周期可以参考文档（如：onShown，onWillShow等），直接在组件后.onShown使用。下面是自定义组件中使用，需要声明，然后用 NavDestination 包裹。6、在页面中使用也需要用 NavDestination 包裹，否则跳转不过来。还有基于Navigation封装的第三方插件。并在文件中写入如下实例代码。或pop时携带有参数。
【最新鸿蒙应用开发】——Navigation路由管理
m0_68038853的博客
07-09 1816
一多开发的项目适合使用Navigation进行统一的页面路由管理。Navigation还提供统一的标题栏、工具栏、菜单栏，并且自带导航返回功能。另外，Navigation还支持一些Router不支持的功能，比如：自带的路由拦截功能，自带的沉浸式功能等等。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件
zdh13370188237的博客
02-15 1744
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件。
鸿蒙5.0开发进阶：UI框架-组件导航 (Navigation)(推荐)
Androidbye的博客
09-24 2283
Navigation组件主要包含​导航页(NavBar)和子页(NavDestination)。
HarmonyOS ArkUI实战开发-页面导航（Navigation）
1
04-22 1525
Navigation的定义不需要传递相关参数，我们先看下NavigationNavigation() { // Navigation只能包含一个子组件.size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性样例运行结果如下图所示：由运行结果可知，在默认情况下，Navigation的样式是一个带有返回箭头的标题栏加子控件组成的。title：设置导航栏的标题，当参数类型为string。
React Native实战教程：导航组件Navigation的搭建
标题中提到的“React Native项目-【有团】-Navigation导航搭建”表明本项目是一个基于React Native框架开发的移动应用，名为“有团”。项目的核心工作之一是搭建Navigation导航系统，Navigation是React Native中用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值