鸿蒙 HarmonyOS 实战 -ArkUI 组件（Navigation）
作者：蜀道山
- 2024-05-07 湖南
本文字数：4885 字
阅读完需：约 16 分钟
🚀一、Navigation
Navigation 组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用 Navigation 组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
在 Navigation 组件中，页面分为主页和内容页。主页由标题栏、内容区和工具栏组成，并且可以使用 NavRouter 子组件实现导航栏功能。内容页则主要显示 NavDestination 子组件中的内容。
NavRouter 是 Navigation 组件中的特殊子组件，通常用于与 Navigation 组件配合使用，它默认提供了点击响应处理，不需要开发者自定义点击事件逻辑。NavRouter 组件只有两个子组件，其中第二个子组件必须是 NavDestination。而 NavDestination 则是 Navigation 组件中的特殊子组件，用于显示内容页的内容。当开发者点击 NavRouter 组件时，会跳转到对应的 NavDestination 内容区。
更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY
🔎1.设置页面显示模式
🦋1.1 自适应模式
Navigation() { ...}.mode(NavigationMode.Auto)
复制代码
mode 属性为 NavigationMode.Auto。自适应模式下，当设备宽度大于 520vp 时，Navigation 组件采用分栏模式，反之采用单页面模式。
🦋1.2 单页面模式
@Entry@Componentstruct 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@Componentstruct 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') }}
复制代码
页面结构如下：
理论效果：
实际效果：
注意：菜单栏图片不存在就会出现如上问题
更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY
🔎2.设置标题栏模式
🦋2.1 Mini 模式
普通型标题栏，用于一级页面不需要突出标题的场景。
@Entry@Componentstruct 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@Componentstruct 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: ()=>{}}]})
复制代码
🚀写在最后
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
关注小编，同时可以期待后续文章 ing🚀，不定期分享原创知识。
更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY
划线
评论
复制
发布于: 刚刚阅读数: 4
蜀道山
关注
欢迎关注作者公众号：【 蜀道衫】 2023-12-29 加入
3年Java后端，5年Android应用开发，精通Java高并发、JVM调优、以及Android开发各种技能。现专研学习鸿蒙HarmonyOS Next操作系统
评论