1# Navigation 2 3Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。从API Version 9开始，推荐与[NavRouter](ts-basic-components-navrouter.md)组件搭配使用。 13 14 15## 接口 16 17Navigation() 18 19 20## 属性 21 22除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 23 24| 名称 | 参数类型 | 描述 | 25| -------------- | ---------------------------------------- | ---------------------------------------- | 26| title | string \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> \| [NavigationCommonTitle](#navigationcommontitle类型说明)<sup>9+</sup> \| [NavigationCustomTitle](#navigationcustomtitle类型说明)<sup>9+</sup> | 页面标题。 | 27| subTitle<sup>deprecated</sup> | string | 页面副标题。从API Version 9开始废弃，建议使用title代替。 | 28| menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)> \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。使用Array<[NavigationMenuItem](#navigationmenuitem类型说明)> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 | 29| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free | 30| toolBar | [object](#object类型说明) \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。不设置时不显示工具栏。<br/>items: 工具栏所有项。<br/>**说明：** <br/>items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后...截断。 | 31| hideToolBar | boolean | 隐藏工具栏。<br/>默认值：false<br/>true: 隐藏工具栏。<br/>false: 显示工具栏。 | 32| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值：false<br/>true: 隐藏标题栏。<br/>false: 显示标题栏。 | 33| hideBackButton | boolean | 隐藏返回键。<br/>默认值：false<br/>true: 隐藏返回键。<br/>false: 显示返回键。 <br>不支持隐藏NavDestination组件标题栏中的返回图标。<br/>**说明：** <br/>返回键键仅针对titleMode为NavigationTitleMode.Mini时才生效。 | 34| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | 导航栏宽度。<br/>默认值：200<br/>单位：vp<br/>**说明：** <br/>仅在Navigation组件分栏时生效。 | 35| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition枚举说明) | 导航栏位置。<br/>默认值：NavBarPosition.Start<br/>**说明：** <br/>仅在Navigation组件分栏时生效。 | 36| mode<sup>9+</sup> | [NavigationMode](#navigationmode枚举说明) | 导航栏的显示模式。<br/>默认值：NavigationMode.Auto<br/>自适应：基于组件宽度自适应单栏和双栏。 | 37| backButtonIcon<sup>9+</sup> | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | 设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。| 38| hideNavBar<sup>9+</sup> | boolean | 是否显示导航栏（仅在mode为NavigationMode.Split时生效）。 | 39 40 41## NavigationMenuItem类型说明 42 43| 名称 | 类型 | 必填 | 描述 | 44| ------ | ----------------------- | ---- | ------------------------------ | 45| value | string | 是 | 菜单栏单个选项的显示文本。 | 46| icon | string | 否 | 菜单栏单个选项的图标资源路径。 | 47| action | () => void | 否 | 当前选项被选中的事件回调。 | 48 49## object类型说明 50 51| 名称 | 类型 | 必填 | 描述 | 52| ------ | ----------------------- | ---- | ------------------------------ | 53| value | string | 是 | 工具栏单个选项的显示文本。 | 54| icon | string | 否 | 工具栏单个选项的图标资源路径。 | 55| action | () => void | 否 | 当前选项被选中的事件回调。 | 56 57## NavigationTitleMode枚举说明 58 59| 名称 | 描述 | 60| ---- | ---------------------------------------- | 61| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 | 62| Mini | 固定为小标题模式。 | 63| Full | 固定为大标题模式。 | 64 65## NavigationCommonTitle类型说明 66 67| 名称 | 类型 | 必填 | 描述 | 68| ------ | --------- | ---- | -------- | 69| main | string | 是 | 设置主标题。 | 70| sub | string | 是 | 设置副标题。 | 71 72## NavigationCustomTitle类型说明 73 74| 名称 | 类型 | 必填 | 描述 | 75| ------ | ----------------------- | ---- | ------------------------------ | 76| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 | 77| height | [TitleHeight](#titleheight枚举说明) \| [Length](ts-types.md#length) | 是 | 设置标题栏高度。 | 78 79## NavBarPosition枚举说明 80 81| 名称 | 描述 | 82| ---- | ---------------------------------------- | 83| Start | 双栏显示时，主列在主轴方向首部。 | 84| End | 双栏显示时，主列在主轴方向尾部。 | 85 86## NavigationMode枚举说明 87 88| 名称 | 描述 | 89| ---- | ---------------------------------------- | 90| Stack | 导航栏与内容区独立显示，相当于两个页面。 | 91| Split | 导航栏与内容区分两栏显示。 | 92| Auto | 窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。 | 93 94## TitleHeight枚举说明 95 96| 名称 | 描述 | 97| ---- | ---------------------------------------- | 98| MainOnly | 只有主标题时标题栏的推荐高度（56vp）。 | 99| MainWithSub | 同时有主标题和副标题时标题栏的推荐高度（82vp）。 | 100 101 102> **说明：** 103> 目前可滚动组件只支持List。 104 105 106## 事件 107 108| 名称 | 功能描述 | 109| ---------------------------------------- | ---------------------------------------- | 110| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 | 111| onNavBarStateChange(callback: (isVisible: boolean) => void) | 导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示，为false时表示隐藏。 | 112 113 114## 示例 115 116```ts 117// xxx.ets 118@Entry 119@Component 120struct NavigationExample { 121 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 122 @State currentIndex: number = 0 123 @State Build: Array<Object> = [ 124 { 125 text: 'add', 126 num: 0 127 }, 128 { 129 text: 'app', 130 num: 1 131 }, 132 { 133 text: 'collect', 134 num: 2 135 } 136 ] 137 138 @Builder NavigationTitle() { 139 Column() { 140 Text('Title') 141 .fontColor('#182431') 142 .fontSize(30) 143 .lineHeight(41) 144 .fontWeight(700) 145 Text('subtitle') 146 .fontColor('#182431') 147 .fontSize(14) 148 .lineHeight(19) 149 .opacity(0.4) 150 .margin({ top: 2 }) 151 }.alignItems(HorizontalAlign.Start) 152 } 153 154 @Builder NavigationMenus() { 155 Row() { 156 Image('common/navigation_icon1.svg') 157 .width(24) 158 .height(24) 159 Image('common/navigation_icon1.svg') 160 .width(24) 161 .height(24) 162 .margin({ left: 24 }) 163 Image('common/navigation_icon2.svg') 164 .width(24) 165 .height(24) 166 .margin({ left: 24 }) 167 } 168 } 169 170 @Builder NavigationToolbar() { 171 Row() { 172 ForEach(this.Build, item => { 173 Column() { 174 Image(this.currentIndex == item.num ? 'common/public_icon_selected.svg' : 'common/public_icon.svg') 175 .width(24) 176 .height(24) 177 Text(item.text) 178 .fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431') 179 .fontSize(10) 180 .lineHeight(14) 181 .fontWeight(500) 182 .margin({ top: 3 }) 183 }.width(104).height(56) 184 .onClick(() => { 185 this.currentIndex = item.num 186 }) 187 }) 188 }.margin({ left: 24 }) 189 } 190 191 build() { 192 Column() { 193 Navigation() { 194 TextInput({ placeholder: 'search...' }) 195 .width(336) 196 .height(40) 197 .backgroundColor('#FFFFFF') 198 .margin({ top: 8, left: 12 }) 199 200 List({ space: 12, initialIndex: 0 }) { 201 ForEach(this.arr, (item) => { 202 ListItem() { 203 Text('' + item) 204 .width(336) 205 .height(72) 206 .backgroundColor('#FFFFFF') 207 .borderRadius(24) 208 .fontSize(16) 209 .fontWeight(500) 210 .textAlign(TextAlign.Center) 211 }.editable(true) 212 }, item => item) 213 } 214 .height(324) 215 .width('100%') 216 .margin({ top: 12, left: 12 }) 217 } 218 .title(this.NavigationTitle) 219 .menus(this.NavigationMenus) 220 .titleMode(NavigationTitleMode.Full) 221 .toolBar(this.NavigationToolbar) 222 .hideTitleBar(false) 223 .hideToolBar(false) 224 .onTitleModeChange((titleModel: NavigationTitleMode) => { 225 console.info('titleMode' + titleModel) 226 }) 227 }.width('100%').height('100%').backgroundColor('#F1F3F5') 228 } 229} 230``` 231 232
