#鸿蒙通关秘籍#如何在鸿蒙中使用Navigation组件实现页面内导航？

HarmonyOS

墨s流年JSON

2024-12-02 15:43:44

1272浏览

回答 1

按赞同

按时间

LogicLion

在鸿蒙开发中，可以通过Navigation组件实现页面内的导航功能。Navigation可作为页面的根容器，支持单页面、分栏、自适应等显示模式，非常适用于模块内页面切换和多端部署。以下是具体实现步骤：

定义基础结构：Navigation组件包含主页和内容页，主页由标题栏、内容区、工具栏组成，通过NavRouter进行导航。
使用NavRouter和NavDestination组件：NavRouter配合Navigation使用，处理点击响应。第二个子组件必须是NavDestination，点击后跳转。
设置显示模式：可以通过mode属性设置分栏、栈式或自动模式，适配不同的窗口场景。

代码实现：

@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)
        }
        .height('100%')
        .width('100%')
        .backgroundColor('#F1F3F5')
    }
}
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.