ArkUI之Navigation解析

1,三种显示模式: 单页面/分栏/自适应

Navigation() {
  ...
}
// 自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。
.mode(NavigationMode.Auto) 
// 单页模式
.mode(NavigationMode.Stack)
// 分栏模式
.mode(NavigationMode.Split)

2, 组件页面结构

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

①设置标题栏(titleMode)

Navigation() {
  ...
}
.titleMode(NavigationTitleMode.Mini) // 普通型,用于一级页面不需要突出标题的场景
.titleMode(NavigationTitleMode.Full) // 强调型,用于一级页面需要突出标题的场景

②设置菜单栏(menus) 位于组件页面右上角

Navigation() {
  ...
}
// menus支持Array<NavigationMenuItem>和CustomBuilder两种参数类型。
// 使用Array<NavigationMenuItem>类型时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，
// 多余的图标会被放入自动生成的更多图标。
.menus([ // value为显示文本; icon为图标; action为交互函数
        {value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])

③设置工具栏(toolBar) 位于组件页面底部

Navigation() {
  ...
}
.toolBar({items:[ // value为显示文本; icon为图标; action为交互函数
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}]})