鸿蒙next开发：arkts如何添加页面内的导航？

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/139157628

1.鸿蒙页面内的导航

Navigation组件一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式。

Navigation组件适用于模块内页面切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

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

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

2.示例代码

@Entry
@Component
struct NavigationPage {
    private itemList: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

    build() {
        Column() {
            Navigation() {
                TextInput({ placeholder: 'search...' })
                    .width("90%")
                    .height(40)
                    .backgroundColor('#FFFFFF')

                List({ space: 20 }) {
                    ForEach(this.itemList, (item: string) => {
                        ListItem() {
                            NavRouter() {
                                Text("NavRouter_" + item)
                                    .width("100%")
                                    .height(72)
                                    .backgroundColor('#FFFFFF')
                                    .borderRadius(20)
                                    .fontSize(16)
                                    .fontWeight(500)
                                    .textAlign(TextAlign.Center)
                                NavDestination() {
                                    Text("Nav_Content_" + item).fontColor(Color.White).fontSize(16)
                                }
                                .title("Nav_title_" + item).backgroundColor(Color.Green)
                            }
                        }
                    }, (item: string): string => item)
                }
                .width("90%")
                .margin({ top: 12 })
            }
            .title("主题")
            .mode(NavigationMode.Split)
            // .mode(NavigationMode.Stack)
            // .mode(NavigationMode.Auto)

        }
        .height('100%')
        .width('100%')
        .backgroundColor('#F1F3F5')
    }
}

注意mode的指定，分栏或栈式或自动，其效果不同。

3.效果

分栏的情况下

栈式或自动的情况下

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

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

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

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

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

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

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

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