HarmonyOS Navigation

Navigation

• Navigation一般作为页面根容器，包括单页面、分栏和自适应三种显示模式
• Navigation提供了属性来设置页面的标题栏、工具栏和导航栏
• Navigation的页面包含主页和内容页

一、设置页面显示模式

1. NavigationMode

NavigationModel.png

a. 自适应模式 NavigationMode.Auto

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

Navigation() {
  ...
}
.mode(NavigationMode.Auto)

b. 单页面模式 NavigationMode.Stack

• 将mode属性设置为NavigationMode.Stack，Navigation组件即可设置为单页面显示模式

Navigation() {
  ...
}
.mode(NavigationMode.Stack)

c. 分栏模式 NavigationMode.Split

• 将mode属性设置为NavigationMode.Split，Navigation组件即可设置为分栏显示模式。

Navigation() {
  ...
}
.mode(NavigationMode.Split)

二、设置标题栏模式

NavigationTitleModel.png

• Navigation组件通过titleMode属性设置标题栏模式。

1. Mini模式

• 普通型标题栏，用于一级页面不需要突出标题的场景

Navigation() {
  ...
}
.titleMode(NavigationTitleMode.Mini)

2. Full模式

• 强调型标题栏，用于一级页面需要突出标题的场景。

Navigation() {
  ...
}
.titleMode(NavigationTitleMode.Full)

三、设置菜单栏

NavigationMenu.png

• 菜单栏位于Navigation组件的右上角，开发者可以通过menus属性进行设置。menus支持Array<NavigationMenuItem>
  和CustomBuilder两种参数类型。使用Array<NavigationMenuItem>类型时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。

Navigation() {
  ...
}
// 配置右上角操作按钮
.menus([{ value: "搜索", icon: "images/tab/tab_home.png", action: () => {

 } }, { value: "菜单", icon: "images/tab/tab_mine.png", action: () => {

} }])

四、设置工具栏

toolBar.png

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

Navigation() {
  ...
}
.toolBar({ items: [{ value: "搜索", icon: "images/tab/tab_home.png", action: () => {

} }, { value: "我的", icon: "images/tab/tab_mine.png", action: () => {
} }] })