鸿蒙5.0版开发：ArkTS组件-Navigation

最新推荐文章于 2024-12-10 14:38:52 发布
最新推荐文章于 2024-12-10 14:38:52 发布
阅读量1.1k 收藏 15
点赞数 19
分类专栏： ArkUI 鸿蒙5.0 ArkTS 文章标签： harmonyos 华为 android ArkTS ArkUI UI框架 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/143597223
版权

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示，首页和非首页通过路由进行切换。

说明：

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

该组件从API Version 11开始默认支持安全区避让特性(默认值为：expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD, SafeAreaType.CUTOUT], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]))，开发者可以重写该属性覆盖默认行为，API Version 11之前的版本需配合expandSafeArea属性实现安全区避让。

子组件

可以包含子组件。

从API Version 9开始，推荐与NavRouter组件搭配使用。

从API Version 10开始，推荐使用NavPathStack配合navDestination属性进行页面路由。

接口

Navigation()

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

Navigation(pathInfos: NavPathStack)

绑定路由栈到Navigation组件。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
pathInfos NavPathStack 是 路由栈信息。

属性

除支持通用属性外，还支持以下属性：

title

title(value: ResourceStr | CustomBuilder | NavigationCommonTitle | NavigationCustomTitle, options?: NavigationTitleOptions)

设置页面标题。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value ResourceStr10+ | CustomBuilder | NavigationCommonTitle9+ | NavigationCustomTitle9+ 是 页面标题，使用NavigationCustomTitle类型设置height高度时，titleMode属性不会生效。字符串超长时，如果不设置副标题，先缩小再换行（2行）最后…截断。如果设置副标题，先缩小最后…截断。
options NavigationTitleOptions11+ 否 标题栏选项。

subTitle(deprecated)

subTitle(value: string)

设置页面副标题。

从API Version 9开始废弃，建议使用title代替。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value string 是 页面副标题。

menus(value: Array<NavigationMenuItem> | CustomBuilder)

说明：

不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。

设置页面右上角菜单。不设置时不显示菜单项。使用Array<NavigationMenuItem> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value Array<NavigationMenuItem> | CustomBuilder 是 页面右上角菜单。

titleMode

titleMode(value: NavigationTitleMode)

设置页面标题栏显示模式。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value NavigationTitleMode 是 页面标题栏显示模式。
默认值：NavigationTitleMode.Free

toolBar(deprecated)

toolBar(value: object | CustomBuilder)

设置工具栏内容。不设置时不显示工具栏。items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后…截断。

从API version 10开始，该接口不再维护，推荐使用toolbarConfiguration代替。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value object | CustomBuilder 是 工具栏内容。

object类型说明：

名称 类型 必填 说明
value string 是 工具栏单个选项的显示文本。
icon string 否 工具栏单个选项的图标资源路径。
action () => void 否 当前选项被选中的事件回调。

toolbarConfiguration10+

toolbarConfiguration(value: Array<ToolbarItem> | CustomBuilder, options?: NavigationToolbarOptions)

说明：

不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。

设置工具栏内容。不设置时不显示工具栏。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value  Array<ToolbarItem>  | CustomBuilder 是 工具栏内容，使用Array<ToolbarItem>写法设置的工具栏有如下特性：
工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。
文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后…截断。
竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为Split模式，仍按照竖屏规则显示，如果为Stack模式需配合menus属性的Array<NavigationMenuItem>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。
使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。
options NavigationToolbarOptions11+ 否 工具栏选项。

hideToolBar

hideToolBar(value: boolean)

设置是否隐藏工具栏。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value boolean 是 是否隐藏工具栏。
默认值：false
true: 隐藏工具栏。
false: 显示工具栏。

hideTitleBar

hideTitleBar(value: boolean)

设置是否隐藏标题栏。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value boolean 是 是否隐藏标题栏。
默认值：false
true: 隐藏标题栏。
false: 显示标题栏。

hideBackButton

hideBackButton(value: boolean)

设置是否隐藏标题栏中的返回键。返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value boolean 是 是否隐藏标题栏中的返回键。
默认值：false
true: 隐藏返回键。
false: 显示返回键。

navBarWidth(value: Length)

设置导航栏宽度。仅在Navigation组件分栏时生效。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value Length 是 导航栏宽度。
默认值：240
单位：vp
undefined：行为不做处理，导航栏宽度与默认值保持一致。

navBarPosition(value: NavBarPosition)

设置导航栏位置。仅在Navigation组件分栏时生效。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value NavBarPosition 是 导航栏位置。
默认值：NavBarPosition.Start

mode9+

mode(value: NavigationMode)

设置导航栏的显示模式。支持Stack、Split与Auto模式。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value NavigationMode 是 导航栏的显示模式。
默认值：NavigationMode.Auto
自适应：基于组件宽度自适应单栏和双栏。

backButtonIcon9+

backButtonIcon(value: string | PixelMap | Resource | SymbolGlyphModifier)

说明：

不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。

设置标题栏中返回键图标。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value string | PixelMap | Resource | SymbolGlyphModifier12+ 是 标题栏中返回键图标。

hideNavBar9+

hideNavBar(value: boolean)

设置是否隐藏导航栏。设置为true时，隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。如果此时路由栈中存在NavDestination页面，则直接显示栈顶NavDestination页面，反之显示空白。

从API Version 9开始到API Version 10仅在双栏模式下生效。从API Version 11开始在单栏、双栏与自适应模式均生效。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value boolean 是 是否隐藏导航栏。
默认值：false

navDestination(builder: (name: string, param: unknown) => void)

创建NavDestination组件。使用builder函数，基于name和param构造NavDestination组件。builder下只能有一个根节点。builder中允许在NavDestination组件外包含一层自定义组件， 但自定义组件不允许设置属性和事件，否则仅显示空白。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
builder (name: string, param: unknown) => void 是 创建NavDestination组件。name：NavDestination页面名称。param：NavDestination页面详细参数。

navBarWidthRange(value: [Dimension, Dimension])

设置导航栏最小和最大宽度（双栏模式下生效）。

规则： 优先级规则详见说明。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value [Dimension, Dimension] 是 导航栏最小和最大宽度。
默认值：最小默认值 240，最大默认值为组件宽度的40% ，且不大于 432，如果只设置一个值，则未设置的值按照默认值计算。
单位：vp

minContentWidth10+

minContentWidth(value: Dimension)

设置导航栏内容区最小宽度（双栏模式下生效）。

规则： 优先级规则详见说明。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value Dimension 是 导航栏内容区最小宽度。
默认值
最低0.47元/天 解锁文章
鸿蒙5.0版开发：ArkTS容器组件（SideBarContainer）
m0_69424697的博客
09-27 866
提供侧边栏可以显示和隐藏的侧边栏容器......
鸿蒙5.0开发进阶：ArkTS组件-页面间转场 (pageTransition)
最新发布
Androidbye的博客
02-10 673
当路由进行切换时，可以通过在pageTransition函数中自定义页面入场和页面退场的转场动效。
ArKTS的基本组件
morr_的博客
02-03 6453
设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。当文本内容较多超出了Text组件范围的时候，您可以使用textOverflow设置文本截取方式，需配合maxLines使用，单独设置不生效，maxLines用于设置文本显示最大行数。
鸿蒙HarmonyOS NEXT开发：组件可见区域变化事件（ArkTS组件事件）
shudaoshanBBQ的博客
08-06 1143
组件可见区域变化事件是组件在屏幕中的显示区域面积变化时触发的事件............
ArkTS的常用组件
2301_80263861的博客
12-10 903
Swiper(){...Indicator.dot() // 设置小圆点的相关属性.itemWidth(20) // 未选中时候的高.itemHeight(20) // 未选中时候的宽.color(Color.Black) // 未选中时候的颜色.selectedItemWidth(30) // 选中时候的宽.selectedItemHight(30) // 选中时候的高.selectedColor(Color.White) // 选中时候的颜色。
【HarmonyOS NEXT】设置组件不同状态下的样式
wu1004019946的博客
06-18 558
从API version 9开始，该接口支持在ArkTS卡片中使用。前多态样式的选中状态样式依赖组件选中属性值，可以使用。从API version 9开始，该接口支持在A。rkTS卡片中使用。修改属性值，或使用属性自带。设置组件不同状态的样式。组件无状态时的样式。组件按下状态的样式。组件禁用状态的样式。组件获焦状态的样式。组件点击状态的样式。组件选中状态的样式。
鸿蒙5.0版开发：ArkTS组件-基础组件（NavRouter）
m0_69424697的博客
09-14 992
导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。
鸿蒙5.0版开发：ArkTS组件-自定义组件内置方法
m0_69424697的博客
12-04 952
自定义组件内置方法是由ArkUI开发框架提供给应用开发者的，定义在自定义组件基类上的API。
鸿蒙5.0版开发：ArkTS组件-基础组件（Navigation）
m0_69424697的博客
09-14 1693
Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用...
鸿蒙5.0版开发：ArkTS容器组件（Navigator）
m0_69424697的博客
09-26 911
路由容器组件，提供路由跳转能力。
HarmonyOS/OpenHarmony应用开发-ArkTS画布组件Canvas
weixin_69135651的博客
02-27 493
提供画布组件，用于自定义绘制图形。该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件，不支持。
【鸿蒙开发】ArkTS和组件
d312697510的博客
04-07 1530
华为鸿蒙开发arkts语法，声明式UI，自定义组件
02ArkTS语言、组件、自定义组件
pacong的博客
03-13 1074
创建自定义组件aBui Lder@Styles// 标题部分Row() {.width(30)Text('商品列表')Blank().width(30)///*@Componentbuild(){// 标题部分Row() {.width(30)Blank().width(30)// .margin({ bottom: 20 }) // 和外界的距离，使用组件的人自己去管}*/// 全局自定义构建函数Text('原价：￥'+ item.price)
HarmonyOS系统开发ArkTS常用组件图片及参数（四）
qq_41946216的博客
03-18 1420
我们在使用resources下的资源时，无需指定具体的环境版本，系统会根据设备所处的环境自动选择匹配的版本，例如当设备系统语言为中文时，则会使用zh_CN目录下的资源，为英文时，则会使用en_US目录下的资源。resources 目录下，可能存在base、（zh_CN和en_US）、系统主题（dark和light）、设备类型（phone 和 tablet）和 rawfile 等适配不同的环境的不同版本的目录。用于存储任意格式的原始文件，需要注意的是rawfile不会根据设备所处的环境去匹配不同的资源。
ArkTS-自定义组件学习
yasinawolaopo的博客
11-24 2183
harmonyOS-ArkTS自定义组件
OpenHarmony开发实战：常用组件与布局（ArkTS）
shudaoshanQAQ的博客
04-07 2016
在本篇文章中，您将通过一个简单的购物社交应用示例，学习如何使用常用的基础组件和容器组件。
学习ArkTS -- 常用组件使用
m0_38036750的博客
04-12 1551
学习arkTS 常用组件学习
鸿蒙5.0版开发：ArkTS组件通用属性-布局约束
m0_69424697的博客
10-21 782
通过组件的宽高比和显示优先级约束组件显示效果。
【鸿蒙软件开发】ArkTS常见组件之单选框Radio和切换按钮Toggle
m0_62599305的博客
10-22 5656
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考Radio。Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。具体用法请参考Toggle。其中对于Toggle独特的属性是，他是当Toggle选中后，所呈现的颜色以上就是今天要讲的内容，本文介绍了单选框Radio和切换按钮Toggle的使用，使用这些组件可以帮助我们快速构建ArkTS的界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值