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