经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 鸿蒙 » 查看文章
鸿蒙HarmonyOS实战-ArkUI组件（Navigation）
来源：cnblogs　　作者：蜀道山QAQ　　时间：2024/4/15 9:49:59　　对本文有异议

??一、Navigation

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

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

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

??1.设置页面显示模式

??1.1 自适应模式

  1. Navigation() {
  2.   ...
  3. }
  4. .mode(NavigationMode.Auto)

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

??1.2 单页面模式

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Navigation() {
  9.         TextInput({ placeholder: 'search...' })
  10.           .width("90%")
  11.           .height(40)
  12.           .backgroundColor('#FFFFFF')
  14.         List({ space: 12 }) {
  15.           ForEach(this.arr, (item) => {
  16.             ListItem() {
  17.               NavRouter() {
  18.                 Text("NavRouter" + item)
  19.                   .width("100%")
  20.                   .height(72)
  21.                   .backgroundColor('#FFFFFF')
  22.                   .borderRadius(24)
  23.                   .fontSize(16)
  24.                   .fontWeight(500)
  25.                   .textAlign(TextAlign.Center)
  26.                 NavDestination() {
  27.                   Text("NavDestinationContent" + item)
  28.                 }
  29.                 .title("NavDestinationTitle" + item)
  30.               }
  31.             }
  32.           }, item => item)
  33.         }
  34.         .width("90%")
  35.         .margin({ top: 12 })
  36.       }
  37.       .title("主标题")
  38.       .mode(NavigationMode.Stack)
  39.       .menus([
  40.         {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
  41.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  42.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  43.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  44.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
  45.       ])
  46.       .toolBar({items: [
  47.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  48.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  49.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
  50.       ]})
  51.     }
  52.     .height('100%')
  53.     .width('100%')
  54.     .backgroundColor('#F1F3F5')
  55.   }
  56. }

页面结构如下：
image

实际效果：
image

注意：菜单栏图片不存在可能会出现问题

??1.3 分栏模式

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Navigation() {
  9.         TextInput({ placeholder: 'search...' })
  10.           .width("90%")
  11.           .height(40)
  12.           .backgroundColor('#FFFFFF')
  14.         List({ space: 12 }) {
  15.           ForEach(this.arr, (item) => {
  16.             ListItem() {
  17.               NavRouter() {
  18.                 Text("NavRouter" + item)
  19.                   .width("100%")
  20.                   .height(72)
  21.                   .backgroundColor('#FFFFFF')
  22.                   .borderRadius(24)
  23.                   .fontSize(16)
  24.                   .fontWeight(500)
  25.                   .textAlign(TextAlign.Center)
  26.                 NavDestination() {
  27.                   Text("NavDestinationContent" + item)
  28.                 }
  29.                 .title("NavDestinationTitle" + item)
  30.               }
  31.             }
  32.           }, item => item)
  33.         }
  34.         .width("90%")
  35.         .margin({ top: 12 })
  36.       }
  37.       .title("主标题")
  38.       .mode(NavigationMode.Split)
  39.       .menus([
  40.         {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
  41.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  42.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  43.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  44.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
  45.       ])
  46.       .toolBar({items: [
  47.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  48.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  49.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
  50.       ]})
  51.     }
  52.     .height('100%')
  53.     .width('100%')
  54.     .backgroundColor('#F1F3F5')
  55.   }
  56. }

页面结构如下：
image

理论效果：
image

实际效果：
image

注意：菜单栏图片不存在就会出现如上问题

??2.设置标题栏模式

??2.1 Mini模式

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

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Navigation() {
  9.         TextInput({ placeholder: 'search...' })
  10.           .width("90%")
  11.           .height(40)
  12.           .backgroundColor('#FFFFFF')
  14.         List({ space: 12 }) {
  15.           ForEach(this.arr, (item) => {
  16.             ListItem() {
  17.               NavRouter() {
  18.                 Text("NavRouter" + item)
  19.                   .width("100%")
  20.                   .height(72)
  21.                   .backgroundColor('#FFFFFF')
  22.                   .borderRadius(24)
  23.                   .fontSize(16)
  24.                   .fontWeight(500)
  25.                   .textAlign(TextAlign.Center)
  26.                 NavDestination() {
  27.                   Text("NavDestinationContent" + item)
  28.                 }
  29.                 .title("NavDestinationTitle" + item)
  30.               }
  31.             }
  32.           }, item => item)
  33.         }
  34.         .width("90%")
  35.         .margin({ top: 12 })
  36.       }
  37.       .title("主标题")
  38.       .titleMode(NavigationTitleMode.Mini)
  39.       .mode(NavigationMode.Split)
  40.       .menus([
  41.         {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
  42.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  43.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  44.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  45.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
  46.       ])
  47.       .toolBar({items: [
  48.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  49.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  50.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
  51.       ]})
  52.     }
  53.     .height('100%')
  54.     .width('100%')
  55.     .backgroundColor('#F1F3F5')
  56.   }
  57. }

image

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

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Navigation() {
  9.         TextInput({ placeholder: 'search...' })
  10.           .width("90%")
  11.           .height(40)
  12.           .backgroundColor('#FFFFFF')
  14.         List({ space: 12 }) {
  15.           ForEach(this.arr, (item) => {
  16.             ListItem() {
  17.               NavRouter() {
  18.                 Text("NavRouter" + item)
  19.                   .width("100%")
  20.                   .height(72)
  21.                   .backgroundColor('#FFFFFF')
  22.                   .borderRadius(24)
  23.                   .fontSize(16)
  24.                   .fontWeight(500)
  25.                   .textAlign(TextAlign.Center)
  26.                 NavDestination() {
  27.                   Text("NavDestinationContent" + item)
  28.                 }
  29.                 .title("NavDestinationTitle" + item)
  30.               }
  31.             }
  32.           }, item => item)
  33.         }
  34.         .width("90%")
  35.         .margin({ top: 12 })
  36.       }
  37.       .title("主标题")
  38.       .titleMode(NavigationTitleMode.Full)
  39.       .mode(NavigationMode.Split)
  40.       .menus([
  41.         {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
  42.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  43.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  44.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  45.         {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
  46.       ])
  47.       .toolBar({items: [
  48.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  49.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  50.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
  51.       ]})
  52.     }
  53.     .height('100%')
  54.     .width('100%')
  55.     .backgroundColor('#F1F3F5')
  56.   }
  57. }

image

注意：菜单栏图片不存在就会出现如上问题

??3.设置菜单栏

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

  1. Navigation() {
  2.   ...
  3. }
  4. .menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},
  5.         {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
  6.         {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])

image

2、设置了4个图标的菜单栏
image

  1. Navigation() {
  2.   ...
  3. }
  4. .menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},
  5.         {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
  6.         {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
  7.         {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])
  8.

??4.设置工具栏

  1. Navigation() {
  2.   ...
  3. }
  4. .toolBar({items:[
  5.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
  6.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
  7.         {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}]})

image

??写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing??，不定期分享原创知识。
  • 更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY

image

原文链接：https://www.cnblogs.com/shudaoshan/p/18133326

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

鸿蒙热门文章

  • 小窗口大魔力，实况窗服务实时掌控重要信息变化
  • 鸿蒙HarmonyOS实战-ArkUI动画（放大缩小视图）
  • 鸿蒙HarmonyOS实战-ArkUI组件（TextInput/TextArea）
  • 鸿蒙HarmonyOS实战-Web组件（请求响应和页面调试）
  • Winform 控件库 MaterialSkin.2 使用教程（鸿蒙字体版）
  • 鸿蒙开发学习（一）之ArkTS
  • 纯血鸿蒙来了，企业开发者应该关注什么
  • 鸿蒙HarmonyOS实战-ArkUI组件（RelativeContainer）
  • 鸿蒙开发游戏（一）---大鱼吃小鱼（界面部署）
  • 鸿蒙开发游戏（三）---大鱼吃小鱼（放置NPC）

    • 鸿蒙推荐文章

  • 鸿蒙HarmonyOS实战-ArkTS语言基础类库（并发）
  • 鸿蒙HarmonyOS实战-Stage模型（应用上下文Context）
  • 鸿蒙HarmonyOS实战-Stage模型（开发卡片事件）
  • 鸿蒙HarmonyOS实战-Stage模型（UIAbility组件）
  • 鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Canvas）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Tabs）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Navigation）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Flex）
  • 鸿蒙HarmonyOS实战-工具安装和Helloworld案例

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号