1# Navigation 2 3Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。 13 14 15## 接口 16 17Navigation() 18 19创建可以根据属性设置，自动展示导航栏、标题、工具栏的组件。 20 21## 属性 22 23除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 24 25| 名称 | 参数类型 | 描述 | 26| -------------- | ---------------------------------------- | ---------------------------------------- | 27| title | string \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面标题。 | 28| subTitle | string | 页面副标题。 | 29| menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)> \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。 | 30| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free | 31| toolBar | [object](#object类型说明) \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items: 工具栏所有项。 | 32| hideToolBar | boolean | 隐藏工具栏：<br/>默认值：false<br/>true: 隐藏工具栏。<br/>false: 显示工具栏。 | 33| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值：false<br/>true: 隐藏标题栏。<br/>false: 显示标题栏。 | 34| hideBackButton | boolean | 隐藏返回键。<br/>默认值：false<br/>true: 隐藏返回键。<br/>false: 显示返回键。 | 35 36## NavigationMenuItem类型说明 37 38| 名称 | 类型 | 必填 | 描述 | 39| ------ | ----------------------- | ---- | ------------------------------ | 40| value | string | 是 | 菜单栏单个选项的显示文本。 | 41| icon | string | 否 | 菜单栏单个选项的图标资源路径。 | 42| action | () => void | 否 | 当前选项被选中的事件回调。 | 43 44## object类型说明 45 46| 名称 | 类型 | 必填 | 描述 | 47| ------ | ----------------------- | ---- | ------------------------------ | 48| value | string | 是 | 工具栏单个选项的显示文本。 | 49| icon | string | 否 | 工具栏单个选项的图标资源路径。 | 50| action | () => void | 否 | 当前选项被选中的事件回调。 | 51 52## NavigationTitleMode枚举说明 53 54| 名称 | 描述 | 55| ---- | ---------------------------------------- | 56| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 | 57| Mini | 固定为小标题模式（图标+主副标题）。 | 58| Full | 固定为大标题模式（主副标题）。 | 59 60> **说明：** 61> 目前可滚动组件只支持List。 62 63 64## 事件 65 66| 名称 | 功能描述 | 67| ---------------------------------------- | ---------------------------------------- | 68| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 | 69 70 71## 示例 72 73```ts 74// xxx.ets 75@Entry 76@Component 77struct NavigationExample { 78 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 79 @State hideBar: boolean = true 80 81 @Builder NavigationTitle() { 82 Column() { 83 Text('title') 84 .width(80) 85 .height(60) 86 .fontColor(Color.Blue) 87 .fontSize(30) 88 } 89 .onClick(() => { 90 console.log("title") 91 }) 92 } 93 94 @Builder NavigationMenus() { 95 Row() { 96 Image('images/add.png') 97 .width(25) 98 .height(25) 99 Image('comment/more.png') 100 .width(25) 101 .height(25) 102 .margin({ left: 30 }) 103 }.width(100) 104 } 105 106 build() { 107 Column() { 108 Navigation() { 109 Search({ value: '', placeholder: "" }).width('85%').margin(26) 110 List({ space: 5, initialIndex: 0 }) { 111 ForEach(this.arr, (item) => { 112 ListItem() { 113 Text('' + item) 114 .width('90%') 115 .height(80) 116 .backgroundColor('#3366CC') 117 .borderRadius(15) 118 .fontSize(16) 119 .textAlign(TextAlign.Center) 120 }.editable(true) 121 }, item => item) 122 } 123 .listDirection(Axis.Vertical) 124 .height(300) 125 .margin({ top: 10, left: 18 }) 126 .width('100%') 127 128 Button(this.hideBar ? "tool bar" : "hide bar") 129 .onClick(() => { 130 this.hideBar = !this.hideBar 131 }) 132 .margin({ left: 135, top: 60 }) 133 } 134 .title(this.NavigationTitle) 135 .subTitle('subtitle') 136 .menus(this.NavigationMenus) 137 .titleMode(NavigationTitleMode.Free) 138 .hideTitleBar(false) 139 .hideBackButton(false) 140 .onTitleModeChange((titleModel: NavigationTitleMode) => { 141 console.log('titleMode') 142 }) 143 .toolBar({ items: [ 144 { value: 'app', icon: 'images/grid.svg', action: () => { 145 console.log("app") 146 } }, 147 { value: 'add', icon: 'images/add.svg', action: () => { 148 console.log("add") 149 } }, 150 { value: 'collect', icon: 'images/collect.svg', action: () => { 151 console.log("collect") 152 } }] }) 153 .hideToolBar(this.hideBar) 154 } 155 } 156} 157``` 158 159 160 161```ts 162// xxx.ets 163@Entry 164@Component 165struct ToolbarBuilderExample { 166 @State currentIndex: number = 0 167 @State Build: Array<Object> = [ 168 { 169 icon: $r('app.media.ic_public_add'), 170 icon_after: $r('app.media.ic_public_addcolor'), 171 text: 'add', 172 num: 0 173 }, 174 { 175 icon: $r('app.media.ic_public_app'), 176 icon_after: $r('app.media.ic_public_appcolor'), 177 text: 'app', 178 num: 1 179 }, 180 { 181 icon: $r('app.media.ic_public_collect'), 182 icon_after: $r('app.media.ic_public_collectcolor'), 183 text: 'collect', 184 num: 2 185 } 186 ] 187 188 @Builder NavigationToolbar() { 189 Row() { 190 ForEach(this.Build, item => { 191 Column() { 192 Image(this.currentIndex == item.num ? item.icon_after : item.icon) 193 .width(25) 194 .height(25) 195 Text(item.text) 196 .fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000") 197 } 198 .onClick(() => { 199 this.currentIndex = item.num 200 }) 201 .margin({ left: 70 }) 202 }) 203 } 204 } 205 206 build() { 207 Column() { 208 Navigation() { 209 Flex() { 210 } 211 } 212 .toolBar(this.NavigationToolbar) 213 } 214 } 215} 216``` 217 218 219
