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

于 2025-03-31 14:21:36 发布
阅读量863 收藏 9
点赞数 11
分类专栏： 鸿蒙5.0 ArkTS ArkUI 文章标签： harmonyos 华为 android ArkTS 鸿蒙系统 ArkUI 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aym88/article/details/146826003
版权

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

ArkUI组件（Navigation）

🚀一、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)
专注移动开发
08-09 1986
Navigation 通过 customNavContentTransition 事件提供自定义转场动画的能力，通过如下三步可以定义一个自定义的转场动画。
【鸿蒙实战开发】基于Navigation的路由管理
HarmonyOSMN的博客
06-27 6763
Navigation由NavDestination组件组成页面路由，在实现过程中NavDestination组件会被封装在一个自定义组件中，从而作为一个页面被路由栈使用。当前支持的生命周期函数：aboutToAppear、onReady、onAppear、onShow、onHide、onDisappear、aboutToDisappear 、onWillAppear、onWillDisappear。
【愚公系列】2023年12月 HarmonyOS教学课程 025-ArkUI组件（Navigation）
热门推荐
时光隧道
12-11 6万+
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
鸿蒙开发-UI-组件导航-Navigation
中年程序员
02-02 3247
上文详细学习了鸿蒙开发UI页面跳转的相关知识，学习页面路由router基本概念，使用方法，页面路由两种跳转模式和两种实例模式的区别以及不同跳转模式和实例模式组合下的使用场景，学习了页面跳转后普通返回和带弹窗的返回使用方法，学习了页面带数据的跳转方式以及目标页面接收数据的方法，本文将学习鸿蒙UI开发组件导航Navigation。
鸿蒙NEXT开发-Navigation组件导航
东林知识库
02-26 2891
鸿蒙Navigation组件导航的学习，包含了基本介绍和里面一些属性的介绍，最后用一个小案例总结！
鸿蒙next版开发：ArkUI组件（Navigation）
SOFTQAQ的博客
08-11 1212
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。
鸿蒙next版开发：ArkUI组件（Tabs）
SOFTQAQ的博客
08-11 810
Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。
鸿蒙HarmonyOS NEXT开发：ArkUI高性能开发（状态管理最佳优化实践）
diongdingQAQ的博客
09-11 1307
在声明式UI编程范式中，UI是应用程序状态的函数，应用程序状态的修改会更新相应的UI界面。
鸿蒙HarmonyOS NEXT开发：组件可见区域变化事件（ArkTS组件事件）
shudaoshanBBQ的博客
08-06 1163
组件可见区域变化事件是组件在屏幕中的显示区域面积变化时触发的事件............
鸿蒙next开发：Navigation页面切换场景范例和预渲染实现Web页面瞬开实践
DMZDAMS的博客
08-02 1198
本文就以Navigation页面切换为例，展开讲解Navigation以上的技术点，帮助开发者快速学习。
HarmonyOS ArkUI实战开发-页面导航（Navigation）
1
04-22 1421
Navigation的定义不需要传递相关参数，我们先看下NavigationNavigation() { // Navigation只能包含一个子组件.size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性样例运行结果如下图所示：由运行结果可知，在默认情况下，Navigation的样式是一个带有返回箭头的标题栏加子控件组成的。title：设置导航栏的标题，当参数类型为string。
HarmonyOS Next开发学习手册——组件导航 (Navigation) (推荐)
maniuT的博客
07-02 3216
Navigation通过 customNavContentTransition 事件提供自定义转场动画的能力，通过如下三步可以定义一个自定义的转场动画。构建一个自定义转场动画工具类CustomNavigationUtils，通过一个Map管理各个页面自定义动画对象CustomTransition，页面在创建的时候将自己的自定义转场动画对象注册进去，销毁的时候解注册；
鸿蒙开发：Navigation路由组件使用由繁入简
知足常乐
10-12 1133
无论是静态配置还是动态配置，都有着手动配置的需要，本篇文章就是要解决手动配置，利用路由库和插件实现自动配置的需求。
【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面之Navigation（二）
一个不断前行的程序者
08-14 1747
Navigation是路由容器组件，一般作为**首页的根容器**，包括**单栏(Stack)、分栏(Split)和自适应(Auto)**三种显示模式。Navigation组件适用于**模块内和跨模块的路由切换**，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上，N**avigation组件能够自适应显示大小，自动切换分栏展示效果**。
ArkUI-Navigation
gitzzp的博客
08-30 1742
Navigation通过事件提供自定义转场动画的能力。构建一个自定义转场动画工具类，通过map管理各个页面自定义动画对象，页面创建的时候注册自定义转场动画，页面销毁的时候解注册。实现一个转场协议对象NavigationAnimatedTransition，其中timeout属性表示转场结束的超时时间，默认为1000ms，transition属性为自定义的转场动画方法，开发者要在这里实现自己的转场动画逻辑，系统会在转场开始时调用该方法，onTransitionEnd为转场结束时的回调。
鸿蒙中Navigation与自定义封装导航组件
qa1269214921的博客
06-04 944
如何快速使用Navigation和怎样创建一个自己的TitleBar组件
鸿蒙5.0开发：ArkUI组件（Navigation）
AyomQAQ的博客
10-14 794
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。
鸿蒙开发系列教程（十三）--组件导航：Navigation 导航
huazi99于老师的博客
02-06 907
Navigation组件的页面包含主页和内容页。主页由标题栏、内容区和工具栏组成，
鸿蒙开发主页面代码
最新发布
03-26
<think>好的，我需要帮助用户找到关于鸿蒙开发中主页面的代码示例。首先，我需要回顾用户提供的引用内容，看看是否有相关的示例或资源。 引用[1]提到《鸿蒙(HarmonyOS)开发学习手册》有892页，可能包含主页面代码示例。引用[2]提到ArkTS和ArkUI开发组件，主页面通常涉及这些技术。引用[4]中的Navigation实现多设备适配案例可能涉及主页面结构。引用[5]的根据icon自适应背景颜色可能与主页面样式有关。 接下来，我需要根据这些信息构造一个主页面示例。通常主页面会包含顶部栏、内容区域和底部导航栏。使用ArkTS或ArkUI的组件，比如Column、Row、Text、Image等。可能还需要使用Navigation组件处理页面导航，如引用[4]所述。 需要确保代码符合鸿蒙最新版本，比如HarmonyOS NEXT，并正确使用ArkTS语法。同时，参考引用[2]中的核心知识点，如Stage模型和多端部署，确保代码的可适配性。 最后，生成相关问题，帮助用户深入理解主页面开发的其他方面，如布局优化、状态管理、多端适配等。确保问题与提供的引用内容相关，比如性能优化方法可能涉及引用[5]的自适应技术。</think>以下是一个基于鸿蒙（HarmonyOS）ArkTS开发框架的主页面代码示例，包含布局、导航和基础交互功能： ```typescript // MainPage.ets @Entry @Component struct MainPage { @State currentTab: number = 0 // 当前选中的底部导航项 build() { Column() { // 顶部标题栏 Row() { Text('HarmonyOS应用') .fontSize(20) .fontWeight(FontWeight.Bold) Blank() Image($r('app.media.settings')) .width(30) .height(30) .onClick(() => { // 跳转到设置页面 router.pushUrl({ url: 'pages/SettingsPage' }) }) } .width('100%') .padding(10) .backgroundColor('#F5F5F5') // 内容区域 Swiper() { ForEach([0, 1, 2], (index) => { Column() { Text(`页面内容区域 ${index + 1}`) .fontSize(18) .margin({ top: 20 }) } .width('100%') .height('100%') }) } .index(this.currentTab) .autoPlay(false) .loop(false) // 底部导航栏 Row() { ForEach([0, 1, 2], (index) => { Column() { Image(this.currentTab === index ? $r('app.media.icon_selected') : $r('app.media.icon_normal')) .width(30) .height(30) Text(['首页', '发现', '我的'][index]) .fontColor(this.currentTab === index ? '#007AFF' : '#666') } .onClick(() => { this.currentTab = index }) .flexGrow(1) }) } .width('100%') .height(60) .backgroundColor('#FFFFFF') } .height('100%') .backgroundColor('#FFFFFF') } } ``` 关键特性说明： 1. 使用`@Entry`和`@Component`装饰器声明页面组件[^2] 2. 采用Stage模型的三层架构（UI、业务逻辑、数据）[^3] 3. 包含顶部导航栏、可滑动内容区和底部Tab导航栏 4. 使用`Swiper`组件实现页面滑动切换[^4] 5. 通过`router.pushUrl`实现页面跳转[^4] 6. 支持多端适配的响应式布局[^4]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值