-
-
鸿蒙HarmonyOS实战-ArkUI组件（Navigation）
-
发表于: 2024-5-9 22:07
-
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
在Navigation组件中，页面分为主页和内容页。主页由标题栏、内容区和工具栏组成，并且可以使用NavRouter子组件实现导航栏功能。内容页则主要显示NavDestination子组件中的内容。
NavRouter是Navigation组件中的特殊子组件，通常用于与Navigation组件配合使用，它默认提供了点击响应处理，不需要开发者自定义点击事件逻辑。NavRouter组件只有两个子组件，其中第二个子组件必须是NavDestination。而NavDestination则是Navigation组件中的特殊子组件，用于显示内容页的内容。当开发者点击NavRouter组件时，会跳转到对应的NavDestination内容区。
更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY
1.设置页面显示模式
????1.1 自适应模式
1 2 3 4 | Navigation() { ...}.mode(NavigationMode.Auto) |
mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。
????1.2 单页面模式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | @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 分栏模式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | @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模式
普通型标题栏，用于一级页面不需要突出标题的场景。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | @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模式
强调型标题栏，用于一级页面需要突出标题的场景。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | @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') }} |
注意：菜单栏图片不存在就会出现如上问题
更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY
3.设置菜单栏
1、设置了3个图标的菜单栏
1 2 3 4 5 6 | 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个图标的菜单栏
1 2 3 4 5 6 7 8 | 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.设置工具栏
1 2 3 4 5 6 7 | 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
[招生]科锐逆向工程师培训(2024年11月15日实地，远程教学同时开班, 第51期)
