鸿蒙 HarmonyOS 实战 -ArkUI 组件(Navigation)
- 2024-05-07 湖南
本文字数:4885 字
阅读完需:约 16 分钟
![鸿蒙HarmonyOS实战-ArkUI组件(Navigation)](https://static001.geekbang.org/infoq/cd/cd4acbd46fd9ebdf0299b66e381a6eee.jpeg)
🚀一、Navigation
Navigation 组件通常作为页面的根容器,支持单页面、分栏和自适应三种显示模式。开发者可以使用 Navigation 组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
![](https://static001.geekbang.org/infoq/cb/cb1f737bb1bed542c690dcbbd243975c.png)
在 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
@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')
}
}
页面结构如下:
![](https://static001.geekbang.org/infoq/28/2852e7bf75e23838cad073fe457bdff2.png)
实际效果:
![](https://static001.geekbang.org/infoq/24/2419e079993579cbb71922ace3c0e1e5.png)
注意:菜单栏图片不存在可能会出现问题
🦋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')
}
}
页面结构如下:
![](https://static001.geekbang.org/infoq/53/5327513c485f7816c3911f60aedfc7f8.png)
理论效果:
![](https://static001.geekbang.org/infoq/e6/e6fc1ebdfc43b1e07148a8c148723020.png)
实际效果:
![](https://static001.geekbang.org/infoq/91/91352f71f9a9904e93567300d8f3b368.png)
注意:菜单栏图片不存在就会出现如上问题
更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY
🔎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')
}
}
![](https://static001.geekbang.org/infoq/65/652c1a750c275fb57abf5dc85718f8b2.png)
🦋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')
}
}
![](https://static001.geekbang.org/infoq/e1/e1e235230c62348cfb7b2104591d2ad6.png)
注意:菜单栏图片不存在就会出现如上问题
🔎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: ()=>{}}])
![](https://static001.geekbang.org/infoq/30/30eecbef0bd81d03c25011af2d14edc7.png)
2、设置了 4 个图标的菜单栏
![](https://static001.geekbang.org/infoq/b0/b0bff7eb5a22eebfffcfe3d6a3354ad2.png)
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: ()=>{}}]})
![](https://static001.geekbang.org/infoq/3a/3a30dee7ab8e0db99b41f22cc4d4dd5f.png)
🚀写在最后
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
关注小编,同时可以期待后续文章 ing🚀,不定期分享原创知识。
更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY
![](https://static001.geekbang.org/infoq/17/17dd6f08bf8f17a5291cd52513261457.png)
![用户头像](http://static001.geekbang.org/account/avatar/00/3a/16/1c/15a52542.jpg?x-oss-process=image/resize,w_200,h_200)
蜀道山
欢迎关注作者公众号:【 蜀道衫】 2023-12-29 加入
3年Java后端,5年Android应用开发,精通Java高并发、JVM调优、以及Android开发各种技能。现专研学习鸿蒙HarmonyOS Next操作系统
评论