7.5：页面导航（Navigation）

您所在的位置：网站首页 › 鸿蒙文件夹透明 › 7.5：页面导航（Navigation）

7.5：页面导航（Navigation）

2024-07-09 23:51| 来源: 网络整理| 查看: 265

# 7.5：页面导航（Navigation）

Navigation 组件一般作为页面布局的根容器，它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。 Navigation 除了提供了默认的展示样式属性外，它还提供了 CustomBuilder 模式来自定义展示样式，本节将介绍一下 Navigation 各属性的简单用法以及使用 CustomBuilder 实现自定义样式。

# 7.5.1：Navigation定义介绍 interface NavigationInterface { (): NavigationAttribute; } 123

Navigation 的定义不需要传递相关参数，我们先看下 Navigation 的最简单样例：

Navigation() { // Navigation只能包含一个子组件 Text('title') .textAlign(TextAlign.Center) .fontSize(30) .width('100%') .backgroundColor('#aabbcc') } .size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性 12345678

样例运行结果如下图所示：

由运行结果可知，在默认情况下， Navigation 的样式是一个带有返回箭头的标题栏加子控件组成的。

# 7.5.2：Navigation属性介绍 declare class NavigationAttribute extends CommonMethod { title(value: string | CustomBuilder): NavigationAttribute; subTitle(value: string): NavigationAttribute; hideTitleBar(value: boolean): NavigationAttribute; hideBackButton(value: boolean): NavigationAttribute; titleMode(value: NavigationTitleMode): NavigationAttribute; menus(value: Array | CustomBuilder): NavigationAttribute; toolBar(value: object | CustomBuilder): NavigationAttribute; hideToolBar(value: boolean): NavigationAttribute; onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute; } 1234567891011

title：设置导航栏的标题，当参数类型为 string 时，可以直接设置标题，但样式不支修改；当参数为 CustomBuilder 时，可以自定义标题样式。

参数类型为 string ，简单样例如下所示：

Navigation() { Text('title') .textAlign(TextAlign.Center) .fontSize(30) .size({width: '100%', height: '100%'}) .backgroundColor('#aabbcc') } .size({width: '100%', height: '100%'}) .title("标题栏")// 设置title，此时不支持修改文字大小，颜色等样式 123456789

样例运行结果如下图所示：

参数类型为 CustomBuilder ，简单样例如下所示：

@Entry @Component struct ComponentTest { @Builder title() {// 通过Builder自定义标题栏，可以灵活的设置标题样式 Row() { Text('Builder标题') .fontSize(20) } .width('100%') .height(55) .backgroundColor(Color.Pink) } build() { Navigation() { Text('title') .textAlign(TextAlign.Center) .fontSize(30) .size({width: '100%', height: '100%'}) .backgroundColor('#aabbcc') } .size({width: '100%', height: '100%'}) .title(this.title())// 使用自定义的标题栏 } } 123456789101112131415161718192021222324

样例运行结果如下图所示：

subTitle：设置页面的副标题，简单样例如下所示：

样例运行结果如下图所示：

hideBackButton：是否隐藏返回按钮，默认情况下不隐藏，简单样例如下所示：

Navigation() { Text('title') .textAlign(TextAlign.Center) .fontSize(30) .size({width: '100%', height: '100%'}) .backgroundColor('#aabbcc') } .size({width: '100%', height: '100%'}) .title("主标题") .subTitle("副标题") .hideBackButton(true) 1234567891011

样例运行结果如下图所示：

toolBar：设置工具栏，当参数类型为 object 时，可以直接设置工具栏选项，但样式不支修改；当参数为 CustomBuilder 时，可以自定义标题栏。

当参数为 object 类型时，参数需要按照如下格式定义：

value：工具栏单个选项的显示文本。 icon：工具栏单个选项的图标资源路径。 action：当前选项被选中时的事件回调。

简单样例如下所示：

build() { Navigation() { Text('title') .textAlign(TextAlign.Center) .fontSize(30) .size({width: '100%', height: '100%'}) .backgroundColor('#aabbcc') } .size({width: '100%', height: '100%'}) .title("标题栏") .toolBar({ items: [ // toolBar接收一个数组 { value: "消息", // 文本 icon: "pages/icon_message.png", // 图片 action: () => { // 事件 console.log("点击了消息") } }, { value: "联系人", icon: "pages/icon_contract.png", action: () => { console.log("点击了首页") } }, { value: "动态", icon: "pages/icon_dynamic.png", action: () => { console.log("点击了首页") } } ]}) } 12345678910111213141516171819202122232425262728293031323334

样例运行结果如下图所示：

当参数为 CustomBuilder 类型时，可以自定义样式，简单样例如下所示：

@Entry @Component struct ComponentTest { @State index: number = 0;// 选项卡下标，默认为第一个 @Builder toolbar() {// 通过builder自定义toolbar Row() { Column() { Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png') .size({width: 25, height: 25}) Text('消息') .fontSize(16) .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b") } .alignItems(HorizontalAlign.Center) .height('100%') .layoutWeight(1) .onClick(() => { this.index = 0; }) Column() { Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png') .size({width: 25, height: 25}) Text('联系人') .fontSize(16) .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b") } .alignItems(HorizontalAlign.Center) .height('100%') .layoutWeight(1) .onClick(() => { this.index = 1; }) Column() { Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png') .size({width: 25, height: 25}) Text('动态') .fontSize(16) .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b") } .alignItems(HorizontalAlign.Center) .height('100%') .layoutWeight(1) .onClick(() => { this.index = 2; }) } .width('100%') .height(60) } build() { Navigation() { Text(this.index == 0 ? "消息" : this.index == 1 ? "联系人" : "动态") .textAlign(TextAlign.Center) .fontSize(30) .size({width: '100%', height: '100%'}) .backgroundColor('#aabbcc') } .size({width: '100%', height: '100%'}) .title("标题栏") .toolBar(this.toolbar()) } } 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465

样例运行结果如下图所示：

hideTitleBar、hideToolBar：设置是否显示或者隐藏标题栏、工具栏，简单样例如下所示：

@Entry @Component struct ComponentTest { @State index: number = 0; @State hideToolBar: boolean = false; @State hideTitleBar: boolean = false; @Builder toolbar() { Row() { Column() { Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png') .size({width: 25, height: 25}) Text('消息') .fontSize(16) .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b") } .alignItems(HorizontalAlign.Center) .height('100%') .layoutWeight(1) .onClick(() => { this.index = 0; }) Column() { Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png') .size({width: 25, height: 25}) Text('联系人') .fontSize(16) .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b") } .alignItems(HorizontalAlign.Center) .height('100%') .layoutWeight(1) .onClick(() => { this.index = 1; }) Column() { Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png') .size({width: 25, height: 25}) Text('动态') .fontSize(16) .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b") } .alignItems(HorizontalAlign.Center) .height('100%') .layoutWeight(1) .onClick(() => { this.index = 2; }) } .width('100%') .height(60) } build() { Navigation() { Column({space: 10}) { Text(this.index == 0 ? "消息" : this.index == 1 ? "联系人" : "动态") .textAlign(TextAlign.Center) .fontSize(30) Button(this.hideTitleBar ? "显示TitleBar" : "隐藏TitleBar") .onClick(() => { this.hideTitleBar = !this.hideTitleBar; }) Button(this.hideToolBar ? "显示ToolBar" : "隐藏ToolBar") .onClick(() => { this.hideToolBar = !this.hideToolBar; }) } .backgroundColor('#aabbcc') .size({width: '100%', height: '100%'}) } .size({width: '100%', height: '100%'}) .title("标题栏") .toolBar(this.toolbar()) .hideToolBar(this.hideToolBar) .hideTitleBar(this.hideTitleBar) } } 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182

样例运行结果如下图所示：

menus：设置标题栏右上角的菜单项，当参数为 CustomBuilder 时可以自定义菜单项。

当参数为 NavigationMenuItem 数组时，参数说明如下：

value：菜单项的显示文本。 icon：菜单项的显示图标路径。 action：点击菜单项的事件回调。

简单样例如下所示：

@Entry @Component struct ComponentTest { @State index: number = 0; @State hideToolBar: boolean = false; @State hideTitleBar: boolean = false; @Builder toolbar() { Row() { Column() { Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png') .size({width: 25, height: 25}) Text('消息') .fontSize(16) .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b") } .alignItems(HorizontalAlign.Center) .height('100%') .layoutWeight(1) .onClick(() => { this.index = 0; }) Column() { Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png') .size({width: 25, height: 25}) Text('联系人') .fontSize(16) .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b") } .alignItems(HorizontalAlign.Center) .height('100%') .layoutWeight(1) .onClick(() => { this.index = 1; }) Column() { Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png') .size({width: 25, height: 25}) Text('动态') .fontSize(16) .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b") } .alignItems(HorizontalAlign.Center) .height('100%') .layoutWeight(1) .onClick(() => { this.index = 2; }) } .width('100%') .height(60) } build() { Navigation() { Column({space: 10}) { Text(this.index == 0 ? "消息" : this.index == 1 ? "联系人" : "动态") .textAlign(TextAlign.Center) .fontSize(30) Button(this.hideTitleBar ? "显示TitleBar" : "隐藏TitleBar") .onClick(() => { this.hideTitleBar = !this.hideTitleBar; }) Button(this.hideToolBar ? "显示ToolBar" : "隐藏ToolBar") .onClick(() => { this.hideToolBar = !this.hideToolBar; }) } .backgroundColor('#aabbcc') .size({width: '100%', height: '100%'}) } .size({width: '100%', height: '100%'}) .title("标题栏") .toolBar(this.toolbar()) .hideToolBar(this.hideToolBar) .hideTitleBar(this.hideTitleBar) .menus([ { value: "搜索", icon: "pages/icon_search.png", action: () => { prompt.showToast({message: "搜索"}) } }, { value: "扫码", icon: "pages/icon_scan.png", action: () => { prompt.showToast({message: "扫码"}) } } ]) } } 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798

样例运行结果如下图所示：

# 7.5.3：Navigation事件介绍 declare class NavigationAttribute extends CommonMethod { onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute; } 123onTitleModeChange：当 titleMode 为 NavigationTitleMode.Free 时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 # 7.5.4：小结

本节通过简单的样例向读者介绍了 Navigation 组件的基本使用，读者掌握了该组件的使用后可以开发更丰富的 UI 界面了。

(adsbygoogle = window.adsbygoogle || []).push({});

← 7.4：页面跳转（Router、Ability） 7.6：窗口模块（Window） →

欢迎加入鸿蒙技术交流群：695438501

津公网安备 12011402001367号

津ICP备2020008934号-2

中央网信办互联网违法和不良信息举报中心

天津市互联网违法和不良信息举报中心

【本文地址】

7.5：页面导航（Navigation）

7.5：页面导航（Navigation）

今日新闻

推荐新闻