1# Navigation 2 3[Navigation](../reference/arkui-ts/ts-basic-components-navigation.md)组件一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式。Navigation组件适用于模块内页面切换，[一次开发，多端部署](../key-features/multi-device-app-dev/introduction.md)场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。[一次开发，多端部署](../key-features/multi-device-app-dev/introduction.md)场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。 4 5Navigation组件的页面包含主页和内容页。主页由标题栏、内容区和工具栏组成，可在内容区中使用[NavRouter](../reference/arkui-ts/ts-basic-components-navrouter.md)子组件实现导航栏功能。内容页主要显示[NavDestination](../reference/arkui-ts/ts-basic-components-navdestination.md)子组件中的内容。 6 7NavRouter是和Navigation搭配使用的特殊子组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。NavRouter有且仅有两个根节点，第二个根节点是NavDestination。NavDestination是和NavRouter搭配使用的特殊子组件，用于显示Navigation组件的内容页。当开发者点击NavRouter组件时，会跳转到对应的NavDestination内容区。 8 9 10## 设置页面显示模式 11 12Navigation组件通过mode属性设置页面的显示模式。 13 14- 自适应模式 15 16 Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。 17 18 19 ``` 20 Navigation() { 21 ... 22 } 23 .mode(NavigationMode.Auto) 24 ``` 25 26- 单页面模式 27 28 **图1** 单页面布局示意图 29 30  31 32 将mode属性设置为NavigationMode.Stack，Navigation组件即可设置为单页面显示模式。 33 34 35 ```ts 36 Navigation() { 37 ... 38 } 39 .mode(NavigationMode.Stack) 40 ``` 41 42  43 44- 分栏模式 45 46 **图2** 分栏布局示意图 47 48  49 50 将mode属性设置为NavigationMode.Split，Navigation组件即可设置为分栏显示模式。 51 52 53 ```ts 54 @Entry 55 @Component 56 struct NavigationExample { 57 @State TooTmp:Record<string,string|Function> = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}} 58 private arr: number[] = [1, 2, 3]; 59 60 build() { 61 Column() { 62 Navigation() { 63 TextInput({ placeholder: 'search...' }) 64 .width("90%") 65 .height(40) 66 .backgroundColor('#FFFFFF') 67 68 List({ space: 12 }) { 69 ForEach(this.arr, (item:string) => { 70 ListItem() { 71 NavRouter() { 72 Text("NavRouter" + item) 73 .width("100%") 74 .height(72) 75 .backgroundColor('#FFFFFF') 76 .borderRadius(24) 77 .fontSize(16) 78 .fontWeight(500) 79 .textAlign(TextAlign.Center) 80 NavDestination() { 81 Text("NavDestinationContent" + item) 82 } 83 .title("NavDestinationTitle" + item) 84 } 85 } 86 }, (item:string):string => item) 87 } 88 .width("90%") 89 .margin({ top: 12 }) 90 } 91 .title("主标题") 92 .mode(NavigationMode.Split) 93 .menus([ 94 {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}}, 95 {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}, 96 {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}, 97 {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}, 98 {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}} 99 ]) 100 .toolBar({items: [ 101 this.TooTmp, 102 this.TooTmp, 103 this.TooTmp 104 ]}) 105 } 106 .height('100%') 107 .width('100%') 108 .backgroundColor('#F1F3F5') 109 } 110 } 111 ``` 112 113  114 115 116## 设置标题栏模式 117 118标题栏在界面顶部，用于呈现界面名称和操作入口，Navigation组件通过titleMode属性设置标题栏模式。 119 120- Mini模式 121 普通型标题栏，用于一级页面不需要突出标题的场景。 122 123 **图3** Mini模式标题栏 124 125  126 127 128 ```ts 129 Navigation() { 130 ... 131 } 132 .titleMode(NavigationTitleMode.Mini) 133 ``` 134 135 136- Full模式 137 强调型标题栏，用于一级页面需要突出标题的场景。 138 139 **图4** Full模式标题栏 140 141  142 143 144 ```ts 145 Navigation() { 146 ... 147 } 148 .titleMode(NavigationTitleMode.Full) 149 ``` 150 151 152## 设置菜单栏 153 154菜单栏位于Navigation组件的右上角，开发者可以通过menus属性进行设置。menus支持Array<[NavigationMenuItem](../reference/arkui-ts/ts-basic-components-navigation.md#navigationmenuitem)>和CustomBuilder两种参数类型。使用Array<NavigationMenuItem>类型时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 155 156**图5** 设置了3个图标的菜单栏 157 158 159 160```ts 161let TooTmp:Record<string,string|Function> = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}} 162Navigation() { 163 ... 164} 165.menus([TooTmp, 166 TooTmp, 167 TooTmp]) 168``` 169 170**图6** 设置了4个图标的菜单栏 171 172 173 174```ts 175let TooTmp:Record<string,string|Function> = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}} 176Navigation() { 177 ... 178} 179.menus([TooTmp, 180 TooTmp, 181 TooTmp, 182 TooTmp]) 183``` 184 185 186## 设置工具栏 187 188工具栏位于Navigation组件的底部，开发者可以通过toolBar属性进行设置。 189 190 191 **图7** 工具栏 192 193 194 195```ts 196let TooTmp:Record<string,string|Function> = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}} 197let TooBar:Record<string,object[]> = {'items':[TooTmp,TooTmp,TooTmp]} 198Navigation() { 199 ... 200} 201.toolBar(TooBar) 202``` 203
