【HarmonyOS NEXT 】应用开发：ArkTS导航组件一（Navigation）

SDK：5.0.0
DevEco Studio：5.0.3
Node.js：18.20.1

一、Navigation组件相关

1、Navigation组件一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式。同时，Navigation提供了属性来设置页面的标题栏、工具栏、导航栏等。

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

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

二、设置页面显示模式

1、代码

@Entry
@Component
struct NavigationExample {
  build() {
    Column() {
      Navigation() {
        // 中间主区域
      }
      .title("主标题") // 页面标题
      .mode(NavigationMode.Auto) // 显示模式：Auto（自适应）、Stack（单页显示）、Split（分栏显示）、Full（强调型标题栏）、Mini（普通型标题栏）
      .menus([
        // 顶部菜单栏
      ])
      .toolBar({items: [
        // 底部工具栏
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

2、各显示模式区分

1）自适应模式

Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。具体样式看下方

2）单页显示模式布局示意图

3）分栏显示模式布局示意图

4）Mini模式：普通型标题栏，用于一级页面不需要突出标题的场景。

5）Full模式:强调型标题栏，用于一级页面需要突出标题的场景。

三、设置菜单栏

菜单栏位于Navigation组件的右上角，开发者可以通过menus属性进行设置。menus支持Array<NavigationMenuItem>和CustomBuilder两种参数类型。

使用Array<NavigationMenuItem>类型时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。

1、代码

Navigation() {
  ...
}
.menus([
        {value: "menufunc4", icon: "resources/rawfile/image/ic_public_search.svg", action: ()=> {console.log("menu1")}},
        {value: "menufunc5", icon: "resources/rawfile/image/ic_public_add.svg", action: ()=> {console.log("menu2")}},
        {value: "menufunc1", icon: "resources/rawfile/image/ic_public_add.svg", action: ()=> {console.log("menu3")}},
        {value: "menufunc2", icon: "resources/rawfile/image/ic_public_add.svg", action: ()=> {console.log("menu4")}},
        {value: "menufunc3", icon: "resources/rawfile/image/ic_public_add.svg", action: ()=> {console.log("menu5")}}
      ])

2、展示效果

四、设置工具栏

工具栏位于Navigation组件的底部，开发者可以通过toolBar属性进行设置。

1、代码

Navigation() {
  ...
}
.toolBar({items:[
  {value: "func1", icon: "resources/rawfile/image/ic_public_highlights.svg", action: ()=> {console.log("toolBar1")}},
  {value: "func2", icon: "resources/rawfile/image/ic_public_highlights.svg", action: ()=> {console.log("toolBar2")}},
  {value: "func3", icon: "resources/rawfile/image/ic_public_highlights.svg", action: ()=> {console.log("toolBar3")}}
]})

2、展示效果

【1】参考文档