HarmonyOS实战开发-ArkUI组件（Navigation）

于 2024-07-28 22:08:12 发布
阅读量738 收藏 15
点赞数 24
分类专栏： 鸿蒙 前端 安卓 文章标签： harmonyos ui 华为 鸿蒙 安卓
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niuma996/article/details/140757234
版权
鸿蒙 同时被 3 个专栏收录
30 篇文章 0 订阅
订阅专栏
前端
30 篇文章 0 订阅
订阅专栏
安卓
30 篇文章 0 订阅
订阅专栏

一、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）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

**获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档**​

代码改变生活007
关注
  • 24
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS应用开发框架HarmonyOS应用开发-实现底部导航栏功能
10-29
在 HarmonyOS 应用开发中，底部导航栏（Bottom Navigation）是用户界面设计的重要组成部分，它为用户提供了一种直观、便捷的方式，以便在多个主功能之间进行切换。本教程将深入探讨如何在 HarmonyOS 应用中实现底部...
鸿蒙开发-UI-组件导航-Navigation
中年程序员
02-02 2655
上文详细学习了鸿蒙开发UI页面跳转的相关知识，学习页面路由router基本概念，使用方法，页面路由两种跳转模式和两种实例模式的区别以及不同跳转模式和实例模式组合下的使用场景，学习了页面跳转后普通返回和带弹窗的返回使用方法，学习了页面带数据的跳转方式以及目标页面接收数据的方法，本文将学习鸿蒙UI开发组件导航Navigation。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件
adendean的博客
02-15 1257
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件。
鸿蒙HarmonyOS实战-ArkUI组件（Navigation）
shudaoshanQAQ的博客
01-06 1516
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
【HarmonyOS】初识ArkUI——快速实现页面导航之Navigation
Mayism123的博客
11-24 4204
关于基本概念就不再多做介绍了，有需要的直接点击上面的链接进行了解即可，我们直接进入正题。HarmonyOS、ArkUI、Navigation、自定义导航栏、底部导航。OK，本期内容就到这里啦，下期再会！
【愚公系列】2023年12月 HarmonyOS教学课程 025-ArkUI组件（Navigation）
热门推荐
时光隧道
12-11 4万+
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
这个初级认证主要涉及HarmonyOS的基础架构、组件使用、页面跳转、权限管理、应用结构以及开发工具的使用。 1. 页面跳转分为页面内跳转和页面间跳转。页面内跳转发生在同一个Ability内部，可以通过Router或...
Laravel开发-laravel-navigation
08-27
在Laravel框架中，"laravel-navigation"通常指的是构建动态导航菜单的过程。Laravel 5引入了许多改进，使得创建和管理应用的导航更加便捷。在这个主题下，我们将深入探讨Laravel 5中的导航构建，包括如何定义、组织...
Laravel开发-sl-navigation
08-28
总的来说，`sl-navigation`为Laravel 5开发带来了一种强大且灵活的方式来处理网站导航。它使菜单的创建和管理更加动态，有助于提高代码的可维护性和适应性。通过合理利用这个库，开发者可以更专注于业务逻辑，而不是...
Harmonyos博客文章.zip
12-28
博客文章中的"harmonyos-producr-2FAN"可能是指HarmonyOS在产品或服务中涉及的2FAN（Fast Application Navigation）特性。2FAN是HarmonyOS的一项关键技术创新，它旨在提高应用启动速度和用户体验。通过2FAN，用户...
鸿蒙HarmonyOS实战开发:Navigation开发页面切换场景
shudaoshanQAQ的博客
04-23 2083
本文就以Navigation页面切换为例，展开讲解Navigation以上的技术点，帮助开发者快速学习。
鸿蒙开发系列教程（十三）--组件导航：Navigation 导航
huazi99的博客
02-06 669
Navigation组件的页面包含主页和内容页。主页由标题栏、内容区和工具栏组成，
鸿蒙（HarmonyOS）Navigation如何实现多场景UI适配？
maniuT的博客
03-26 1345
在窄屏设备上，联系人和聊天区在多窗口中体现。在宽屏设备上，联系人和聊天区在同一窗口体现。要做好适配，往往需要开发者开发多套代码，以便运行在不同设备上。但是这样耗时耗力，于是ArkUI针对这种场景提供了分栏组件，可以通过一套代码完成不同设别的适配，本例简单介绍下如何使用分栏组件实现上述场景。
鸿蒙开发笔记(二十二): 页面路由(router),组件导航 Navigation, Tabs
Waruler的博客
01-22 2469
页面路由(router),组件导航 Navigation, Tabs
HarmonyOS实战开发：Navigation（组件导航）
2401_84194030的博客
05-10 1178
Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。
HormonyOS第一课第六章习题答案
最新发布
m0_55660474的博客
06-27 2115
2. WebviewController提供了变更Web组件显示内容的接口，例如可以使用loadData来加载一个网页链接地址改变Web组件的渲染内容。3. Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，可以通过该组件提供的路由能力实现首页与非首页的切换。D. getParamByName方法需要传入一个string类型的页面名称，方法执行完成后会返回第一个页面名称为传入值的页面信息。A. 控制Web组件加载内容。C. 控制Web内容前进后退。D. 加载XML页面。
2024年HarmonyOS鸿蒙最新鸿蒙（HarmonyOS）Navigation如何实现多场景UI适配？(2)，微信小程序如何跳转页面
2401_84852027的博客
05-09 445
/ Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。build() {Column() {// 导航组件，默认提供点击响应处理// 导航区内容// NavRouter组件的子组件，用于显示导航内容区。// 内容区Row() {.width(40)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值