【鸿蒙实战开发】鸿蒙ArkUI组件（Navigation）概述与应用

最新推荐文章于 2024-06-25 22:09:07 发布
最新推荐文章于 2024-06-25 22:09:07 发布
阅读量717 收藏 17
点赞数 13
文章标签： harmonyos 华为 鸿蒙 鸿蒙系统 安卓 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS_001/article/details/139803764
版权

前言

不久前华为已经宣布全新HarmonyOS NEXT 鸿蒙星河版将在今年秋天正式和消费者见面，并已经面向开发者开放申请。鸿蒙星河版会有更智能、更极致的原生体验，也标志着鸿蒙迈向其发展的第二阶段。
因此，对于鸿蒙生态建设而言，2024年可谓至关重要，而生态建设的前提，就是要有足够的开发人才。与之对应的，今年春招市场上与鸿蒙相关岗位和人才旺盛的热度，一方面反应了鸿蒙生态的逐渐壮大，另一方面也让人们对鸿蒙下一阶段的发展更具信心。

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

本文大家聊一下鸿蒙实战开发中的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: ()=>{}}]})

在这里插入图片描述

写在最后

有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了

最新鸿蒙全栈开发学习线路在这里插入图片描述

鸿蒙HarmonyOS开发教学视频

在这里插入图片描述
在这里插入图片描述

大厂面试真题

在这里插入图片描述

在这里插入图片描述

鸿蒙OpenHarmony源码剖析

在这里插入图片描述

这份资料能帮住各位小伙伴理清自己的学习思路，更加快捷有效的掌握鸿蒙开发的各种知识。有需要的小伙伴自行领取，，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→鸿蒙全栈开发学习资料

HarmonyOS_001
关注
  • 13
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件
zdh13370188237的博客
02-15 1495
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件。
HarmonyOS应用开发框架HarmonyOS应用开发-实现底部导航栏功能
10-29
在 HarmonyOS 应用开发中，底部导航栏（Bottom Navigation）是用户界面设计的重要组成部分，它为用户提供了一种直观、便捷的方式，以便在多个主功能之间进行切换。本教程将深入探讨如何在 HarmonyOS 应用中实现底部...
鸿蒙开发-UI-组件导航-Navigation
中年程序员
02-02 2453
上文详细学习了鸿蒙开发UI页面跳转的相关知识，学习页面路由router基本概念，使用方法，页面路由两种跳转模式和两种实例模式的区别以及不同跳转模式和实例模式组合下的使用场景，学习了页面跳转后普通返回和带弹窗的返回使用方法，学习了页面带数据的跳转方式以及目标页面接收数据的方法，本文将学习鸿蒙UI开发组件导航Navigation。
HarmonyOS ArkUI实战开发-页面导航（Navigation）
m0_70748458的博客
06-03 806
Navigation的定义不需要传递相关参数，我们先看下NavigationNavigation() { // Navigation只能包含一个子组件.size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性样例运行结果如下图所示：由运行结果可知，在默认情况下，Navigation的样式是一个带有返回箭头的标题栏加子控件组成的。title：设置导航栏的标题，当参数类型为string。
【愚公系列】2023年12月 HarmonyOS教学课程 025-ArkUI组件（Navigation）
热门推荐
时光隧道
12-11 4万+
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
鸿蒙ArkTS声明式组件：【Navigation】
最新发布
2401_82772199的博客
06-25 879
Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
鸿蒙中Navigation与自定义封装导航组件
qa1269214921的博客
06-04 396
如何快速使用Navigation和怎样创建一个自己的TitleBar组件
【Android】Jetpack全组件实战开发短视频应用App(三)
01-03
这一篇我们将使用Navigation搭建我们App的基础架构，我们先看下效果 Navigation介绍 官网地址 快速入门 导航组件由以下三个关键部分组成： 导航图：在一个集中位置包含所有导航相关信息的 XML 资源。这包括应用内...
Harmonyos博客文章.zip
12-28
7. **实战案例分析**：博客文章可能分享了实际应用HarmonyOS的案例，如智能家居、智慧办公、车载娱乐系统等，展示HarmonyOS在不同场景下的优势和创新实践。 8. **开发者支持**：华为为开发者提供了全面的工具和服务...
Android应用源码之NavigationDrawer完整代码.zip
11-05
NavigationDrawer是Android应用程序中常见的一种设计模式，它用于在界面左侧或右侧滑出一个侧滑菜单，通常包含应用的主要导航选项。在这个名为"Android应用源码之NavigationDrawer完整代码.zip"的压缩包中，你应该...
2024年HarmonyOS鸿蒙最新鸿蒙（HarmonyOS）Navigation如何实现多场景UI适配？(1)，2024年最新h5页面怎么做
2401_84850374的博客
05-12 280
/ 导航组件，默认提供点击响应处理// 导航区内容// NavRouter组件的子组件，用于显示导航内容区。// 内容区Row() {.width(40)Text(‘今天幸运数字’ + index.toString())// 设置内容区标题// Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。
鸿蒙HarmonyOS实战-ArkUI组件（Navigation）_harmonyos navigation(1)
weixin_58132019的博客
04-11 671
讲义、实战项目、讲解视频，并且会持续更新**
鸿蒙开发笔记(二十二): 页面路由(router),组件导航 Navigation, Tabs
Waruler的博客
01-22 2230
页面路由(router),组件导航 Navigation, Tabs
鸿蒙HarmonyOS实战-ArkUI组件（Navigation）
shudaoshanQAQ的博客
01-06 1465
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
【HarmonyOS】初识ArkUI——快速实现页面导航之Navigation
Mayism123的博客
11-24 3918
关于基本概念就不再多做介绍了，有需要的直接点击上面的链接进行了解即可，我们直接进入正题。HarmonyOS、ArkUI、Navigation、自定义导航栏、底部导航。OK，本期内容就到这里啦，下期再会！
鸿蒙HarmonyOS实战开发:Navigation开发页面切换场景
shudaoshanQAQ的博客
04-23 1762
本文就以Navigation页面切换为例，展开讲解Navigation以上的技术点，帮助开发者快速学习。
HarmonyOS 整体容器组件(Navigation)
weixin_45966674的博客
01-09 1306
这里 我们toolBar 先用一个 object对象形式 里面字段 items 是个数组 然后里面 每一个下标都是一个对象 里面的value字段就是控制内容文本。然后 里面一个Column 列组件 然后用了一个Text文本组件 下面定义了 字体大小 和 颜色 然后直接将它写进Navigation的Title属性中。toolBar 页面工具类内容 可以直接往里面写元素 也可以 一个对象 items字段是一个数组。然后 我们还可以 写一个元素 写到title等内容中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值