ArkUI---Navigation组件介绍

一、什么是Navigation

        Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，一次开发、多段部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果。

        Navigation组件主要包含​导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar，包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成，其中导航页可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。

二、Navigation显示模式

        1、自适应模式

        Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当页面宽度大于等于一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。

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

        2、单页面模式

        

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

        3、分栏模式 

        

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

三、Navigation标题栏样式

        标题栏在界面顶部，用于呈现界面名称和操作入口，Navigation组件通过titleMode属性设置标题栏模式。

        1、mini样式

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

        

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

        2、full模式

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

        

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

四、Navigation菜单栏

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

        

let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() {
  ...
}
.menus([TooTmp,
  TooTmp,
  TooTmp])

五、Navigation工具栏

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

        

let TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooBar: ToolbarItem[] = [TooTmp,TooTmp,TooTmp]
Navigation() {
  ...
}
.toolbarConfiguration(TooBar)

注：路由页面操作详见以下文章：路由介绍