1、描述
Navigation组件一般作为Page页面的根容器，通过属性设置来展示的标题栏、工具栏、导航栏等。
2、子组件
可以包含子组件，推荐与NavRouter组件搭配使用。
3、接口
Navigation()
4、属性
|----------------|----------------------------------------------------------------------|----------------------------------------------------------------------------------------------|
| 名称 | 参数类型 | 描述 |
| title | string|NavigationCommonTitle|NavigationCustomTitle| CustomBuilder | 页面标题 |
| menus | Array<NavigationMenuItem>| CustomBuilder | 页面右上角菜单。使用Array<NavigationMenuItem>写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被自动放入自动生成的更多图标。 |
| titleMode | NavigationTitleMode | 页面标题栏显示模式。 默认值：NavigationTitleMode.Free |
| toolBar | object|CustomBuilder | 设置工具栏内容。 Items：工具栏所有项 Items均分底部工具栏，在每个均分内容布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后...截断。 |
| hideToolBar | boolean | 隐藏工具栏。 默认值：false true:隐藏工具栏 false:显示工具栏 |
| hideTitleBar | boolean | 隐藏标题栏。 默认值：false true:隐藏标题栏 false:显示标题栏 |
| hideBackButton | boolean | 隐藏返回键。不支持隐藏Navigation组件标题栏中的返回图标。 默认值：false 说明： 返回键仅针对titleMode为NavigationTitleMode.Min时才生效。 |
| navBarWidth | Length | 导航栏宽度。 默认值：200vp 说明：仅在Navigation组件分栏时生效。 |
| navBarPosition | NavBarPosition | 导航栏位置。 默认值：NavBarPosition.Start 说明：仅在Navigation组件分栏时生效。 |
| mode | NavigationMode | 导航栏的显示模式。 默认值：NavigationMode.Auto 自适应：基于组件的宽度自适应单栏和双栏。 |
| backButtonIcon | string|PixeMap|Resource | 设置导航栏返回图标。 |
| hideNavBar | boolean | 是否显示导航栏（仅在mode为NavigationMode.Split时生效） |
- 属性中一些类型的说明
Menus -> NavigationMenuItem类型说明
|--------|-------------|----|-----------------|
| 名称 | 类型 | 必填 | 描述 |
| value | string | 是 | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | 菜单栏单个选项的图标资源路径。 |
| action | () => void | 否 | 当前选项被选中的事件回调。 |
toolBar -> object类型说明
|--------|-------------|----|-----------------|
| 名称 | 类型 | 必填 | 描述 |
| value | string | 是 | 工具栏单个选项的显示文本。 |
| icon | string | 否 | 工具栏单个选项的图标资源路径。 |
| action | () => void | 否 | 当前选项被选中的事件回调。 |
titleMode -> NavigationTitleMode枚举说明
|------|-----------------------------------------------------|
| 名称 | 描述 |
| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容时则恢复原样。 |
| Mini | 固定为小图标模式。 |
| Full | 固定为大图标模式。 |
NavBarPosition枚举说明
| 名称 | 描述 |
|---|---|
| Start | 双栏显示时，主列在主轴方向首部。 |
| End | 双栏显示时，主列在主轴方向尾部。 |
NavigationMode枚举说明
| 名称 | 描述 |
|---|---|
| Stack | 导航栏与内容区独立显示，相当于两个页面。 |
| Split | 导航栏与内容区分两栏显示。 |
| Auto | 窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。 |
TitleHeight枚举说明
|-------------|----------------------------|
| 名称 | 描述 |
| MainOnly | 只有主标题时标题栏的推荐高度（56vp）。 |
| MainWithSub | 同时有主标题和副标题时标题栏的推荐高度（82vp）。 |
6、事件
|------------------------------------------------------------------------|-----------------------------------------------------------------|
| 名称 | 描述 |
| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 |
| onNavBarStateChange(callback: (isVisible: boolean) => void) | 导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示，为false时表示隐藏。 |
7、示例
import router from '@ohos.router'
@Entry
@Component
struct NavigationPage {
@State message: string = 'Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。'
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State currentIndex: number = 0
@State Build: Array<Object> = [
{
text: 'add',
num: 0
},
{
text: 'app',
num: 1
},
{
text: 'collect',
num: 2
}
]
// 页面标题
@Builder
NavigationTitle() {
Column() {
Text('Title')
.fontColor('#182431')
.fontSize(30)
.lineHeight(41)
.fontWeight(700)
Text('subtitle')
.fontColor('#182431')
.fontSize(14)
.lineHeight(19)
.opacity(0.4)
.margin({ top: 2, bottom: 20 })
}
.alignItems(HorizontalAlign.Start)
}
// 页面右上角菜单
@Builder
NavigationMenus() {
Column() {
Blank(12)
Row() {
Image($r("app.media.navigation_icon1"))
.width(24)
.height(24)
Image($r("app.media.navigation_icon1"))
.width(24)
.height(24)
.margin({ left: 24 })
Image($r("app.media.navigation_icon2"))
.width(24)
.height(24)
.margin({ left: 24 })
}
}
}
// 设置工具栏内容
@Builder
NavigationToolbar() {
Row() {
ForEach(this.Build, (item) => {
Column() {
Image(this.currentIndex == item.num ? $r("app.media.navigation_toolbar_public_selected") : $r("app.media.navigation_toolbar_public"))
.width(24)
.height(24)
Text(item.text)
.fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431')
.fontSize(10)
.lineHeight(14)
.fontWeight(500)
.margin({ top: 3 })
}.width(104).height(56)
.onClick(() => {
this.currentIndex = item.num
})
})
}.margin({ left: 24 })
}
build() {
Column() {
Navigation() {
TextInput({ placeholder: 'search...' })
.width('90%')
.height(40)
.backgroundColor('#FFFFFF')
.margin({ top: 8 })
List({ space: 12, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('90%')
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
.fontSize(16)
.fontWeight(500)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
}
.height(324)
.width('100%')
.margin({ top: 12, left: '10%' })
Button("Navigation文本文档")
.fontSize(20)
.backgroundColor('#007DFF')
.width('96%')
.onClick(() => {
// 处理点击事件逻辑
router.pushUrl({
url: "pages/baseComponent/navigation/NavigationDesc",
})
})
.margin({ top: 20 })
}
.title(this.NavigationTitle) // 页面标题
.menus(this.NavigationMenus) // 页面右上角菜单
.titleMode(NavigationTitleMode.Full) // 页面标题栏显示模式。
.toolBar(this.NavigationToolbar) // 设置工具栏内容
.hideTitleBar(false) // 隐藏标题栏
.hideToolBar(false) // 隐藏工具栏
.onTitleModeChange((titleModel: NavigationTitleMode) => { //
console.info('titleMode' + titleModel)
})
}
.width('100%').height("100%").backgroundColor('#F1F3F5')
}
}
8、效果图
