ArKTS基础组件2
以垂直列表形式显示的菜单。
Menu
以垂直列表形式显示的菜单。
fontSize(deprecated)
fontSize(value: Length)
统一设置Menu中所有文本的尺寸。
从API Version 10开始废弃，建议使用font代替。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Length | 是 | Menu中所有文本的尺寸，Length为number类型时，使用fp单位。 |
font10+
font(value: Font)
统一设置Menu中所有文本的尺寸。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Font | 是 | Menu中所有文本的尺寸。 |
fontColor10+
fontColor(value: ResourceColor)
统一设置Menu中所有文本的颜色。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | ResourceColor | 是 | Menu中所有文本的颜色。 |
radius10+
radius(value: Dimension | BorderRadiuses)
设置Menu边框圆角半径。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Dimension | BorderRadiuses | 是 |
Menu边框圆角半径。 默认值跟随主题。 从API version 12开始，当水平方向两个圆角半径之和的最大值大于菜单宽度，或垂直方向两个圆角半径之和的最大值大于菜单高度时，菜单四个圆角均采用菜单默认圆角半径值。 |
width10+
width(value: Length)
设置Menu边框宽度，支持设置的最小宽度为64vp。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Length | 是 | Menu边框宽度。 |
menuItemDivider12+
menuItemDivider(options: DividerStyleOptions | undefined)
设置menuItem分割线样式, 不设置该属性则不展示分割线。
startMargin + endMargin 超过组件宽度后startMargin和endMargin会被置0。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| options | DividerStyleOptions | undefined | 是 |
设置menuItem分割线样式。 -strokeWidth:分割线的线宽。 -color：分割线的颜色。 -startMargin：分割线与menuItem侧边起端的距离。 -endMargin：分割线与menuItem侧边结束端的距离。 |
menuItemGroupDivider12+
menuItemGroupDivider(options: DividerStyleOptions | undefined)
设置menuItemGroup上下分割线的样式, 不设置该属性则默认展示分割线。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| options | DividerStyleOptions | undefined | 是 |
设置menuItemGroup顶部和底部分割线样式。 -strokeWidth:分割线的线宽, 默认值是1px。 -color：分割线的颜色, 默认值是 #33000000。 -startMargin：分割线与menuItemGroup侧边起端的距离, 默认值是16。 -endMargin：分割线与menuItemGroup侧边结束端的距离, 默认值是16。 |
subMenuExpandingMode12+
subMenuExpandingMode(mode: SubMenuExpandingMode)
设置Menu子菜单展开样式。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| mode | SubMenuExpandingMode | 是 | Menu子菜单展开样式。 |
MenuItem
用来展示菜单Menu中具体的item菜单项。
selected
selected(value: boolean)
设置菜单项是否选中。
从API version 10开始，该参数支持$$双向绑定变量。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | boolean | 是 |
菜单项是否选中。 默认值：false |
selectIcon
selectIcon(value: boolean | ResourceStr | SymbolGlyphModifier)
设置当菜单项被选中时，是否显示被选中的图标。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | boolean | ResourceStr10+| SymbolGlyphModifier12+ | 是 |
菜单项被选中时，是否显示被选中的图标。 默认值：false true: 菜单项被选中时，显示默认的对勾图标 false: 即使菜单项被选中也不显示图标 ResourceStr: 菜单项被选中时，显示指定的图标 SymbolGlyphModifier: 菜单项被选中时，显示指定的HMSymbol图标。 |
contentFont10+
contentFont(value: Font)
设置菜单项中内容信息的字体样式。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Font | 是 | 菜单项中内容信息的字体样式。 |
contentFontColor10+
contentFontColor(value: ResourceColor)
设置菜单项中内容信息的字体颜色。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | ResourceColor | 是 | 菜单项中内容信息的字体颜色。 |
labelFont10+
labelFont(value: Font)
设置菜单项中标签信息的字体样式。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Font | 是 | 菜单项中标签信息的字体样式。 |
labelFontColor10+
labelFontColor(value: ResourceColor)
设置菜单项中标签信息的字体颜色。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | ResourceColor | 是 | 菜单项中标签信息的字体颜色。 |
@Builder MenuTest(){
Menu(){
MenuItem({startIcon:$r('app.media.app_icon'),
content:'首页',endIcon:$r('app.media.startIcon'),
builder:():void=>this.subMenuTest()
})
.selected(true)//默认选中
.selectIcon(this.sIcon)
.contentFont({size:16,style:FontStyle.Normal,weight:900})
.contentFontColor('red')
.labelFontColor('red')
MenuItem({symbolStartIcon:this.sIcon,symbolEndIcon:this.eIcon,content:'图表选项'})
MenuItemGroup({header:'头',footer:'底部'}){
MenuItem({symbolStartIcon:this.sIcon,symbolEndIcon:this.eIcon,content:'图表选项'})
MenuItem({symbolStartIcon:this.sIcon,symbolEndIcon:this.eIcon,content:'图表选项'})
}
}
.backgroundColor('#abcdef')
.height(300)
.font({size:20,weight:FontWeight.Bold,style:FontStyle.Italic})
.fontColor('#fcf')
.radius(20)
.width(200)
.menuItemDivider({strokeWidth:LengthMetrics.vp(2),
color:'green',startMargin:LengthMetrics.vp(10),
endMargin:LengthMetrics.vp(10)})
// .subMenuExpandingMode(SubMenuExpandingMode.STACK_EXPAND)
}
Navigation
Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。
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
menus(value: Array<NavigationMenuItem> | CustomBuilder)
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 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 | 是 | 工具栏内容。 |
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: 显示返回键。 |
navBarWidth9+
navBarWidth(value: Length)
设置导航栏宽度。仅在Navigation组件分栏时生效。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Length | 是 |
导航栏宽度。 默认值：240 单位：vp undefined：行为不做处理，导航栏宽度与默认值保持一致。 |
navBarPosition9+
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)
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 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 |
navDestination10+
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组件。 |
navBarWidthRange10+
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 | 是 |
导航栏内容区最小宽度。 默认值：360 单位：vp undefined：行为不做处理，导航栏内容区最小宽度与默认值保持一致。 Auto模式断点计算：默认600vp，minNavBarWidth(240vp) + minContentWidth (360vp) |
ignoreLayoutSafeArea12+
ignoreLayoutSafeArea(types?: Array<LayoutSafeAreaType>, edges?: Array<LayoutSafeAreaEdge>)
控制组件的布局，使其扩展到非安全区域
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| types | Array <LayoutSafeAreaType> | 否 |
配置扩展安全区域的类型。 默认值: [LayoutSafeAreaType.SYSTEM] |
| edges | Array <LayoutSafeAreaEdge> | 否 |
配置扩展安全区域的方向。 默认值: [LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]。 |
systemBarStyle12+
systemBarStyle(style: Optional<SystemBarStyle>)
当Navigation中显示Navigation首页时，设置对应系统状态栏的样式。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| style | Optional<SystemBarStyle> | 是 | 系统状态栏样式。 |
onTitleModeChange
onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void)
当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| titleMode | NavigationTitleMode | 是 | 标题模式。 |
onNavBarStateChange9+
onNavBarStateChange(callback: (isVisible: boolean) => void)
导航栏显示状态切换时触发该回调。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| isVisible | boolean | 是 | isVisible为true时表示显示，为false时表示隐藏。 |
onNavigationModeChange11+
onNavigationModeChange(callback: (mode: NavigationMode) => void)
当Navigation首次显示或者单双栏状态发生变化时触发该回调。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| mode | NavigationMode | 是 |
NavigationMode.Split: 当前Navigation显示为双栏; NavigationMode.Stack: 当前Navigation显示为单栏。 |
customNavContentTransition11+
customNavContentTransition(delegate(from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => NavigationAnimatedTransition | undefined)
自定义转场动画回调。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| from | NavContentInfo | 是 | 退场Destination的页面。 |
| to | NavContentInfo | 是 | 进场Destination的页面。 |
| operation | NavigationOperation | 是 | 转场类型。 |
返回值：
| 类型 | 说明 |
|---|---|
| NavigationAnimatedTransition | undefined |
自定义转场动画协议。 undefined: 返回未定义，执行默认转场动效。 |
NavPathStack10+
Navigation路由栈，允许被继承12+。开发者可以在派生类中新增属性方法，也可以重写基类NavPathStack的方法。派生类对象可以替代基类NavPathStack对象使用。使用示例参见示例10。
pushPath10+
pushPath(info: NavPathInfo, animated?: boolean): void
将info指定的NavDestination页面信息入栈。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
参数：
| 名称 | 类型 | 必填 | 描述 |
|---|---|---|---|
| info | NavPathInfo | 是 | NavDestination页面的信息。 |
| animated11+ | boolean | 否 | 是否支持转场动画，默认值：true。 |
pushPath12+
pushPath(info: NavPathInfo, options?: NavigationOptions): void
将info指定的NavDestination页面信息入栈，具体根据options中指定不同的LaunchMode，有不同的行为。
参数：
| 名称 | 类型 | 必填 | 描述 |
|---|---|---|---|
| info | NavPathInfo | 是 | NavDestination页面的信息。 |
| options | NavigationOptions | 否 | 页面栈操作选项。 |
pushPathByName10+
pushPathByName(name: string, param: unknown, animated?: boolean): void
将name指定的NavDestination页面信息入栈，传递的数据为param。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
参数：
| 名称 | 类型 | 必填 | 描述 |
|---|---|---|---|
| name | string | 是 | NavDestination页面名称。 |
| param | unknown | 是 | NavDestination页面详细参数。 |
| animated11+ | boolean | 否 | 是否支持转场动画，默认值：true。 |
pushPathByName11+
pushPathByName(name: string, param: Object, onPop: Callback<PopInfo>, animated?: boolean): void
将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
参数：
| 名称 | 类型 | 必填 | 描述 |
|---|---|---|---|
| name | string | 是 | NavDestination页面名称。 |
| param | Object | 是 | NavDestination页面详细参数。 |
| onPop | Callback<PopInfo> | 是 | Callback回调，用于页面出栈时触发该回调处理返回结果。 |
| animated | boolean | 否 | 是否支持转场动画，默认值：true。 |
pushDestination11+
pushDestination(info: NavPathInfo, animated?: boolean): Promise<void>
将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
参数：
| 名称 | 类型 | 必填 | 描述 |
|---|---|---|---|
| info | NavPathInfo | 是 | NavDestination页面的信息。 |
| animated | boolean | 否 | 是否支持转场动画，默认值：true。 |
@Builder navTest(){
Navigation(){
Text('导航')
}.width('100%')
.height('100%')
.title('导航页')
.menus(this.rightMenus())//右上角
.titleMode(NavigationTitleMode.Mini)
// .toolBar(this.toolBar())
.toolbarConfiguration([
{value:'首页',symbolIcon:this.sIcon,
activeSymbolIcon:this.eIcon,
status:ToolbarItemStatus.ACTIVE
},
{value:'社区',icon:$r('app.media.app_icon'),
activeIcon:$r('app.media.app_icon')
},
{value:'消息',icon:$r('app.media.app_icon')},
{value:'我的',icon:$r('app.media.app_icon')},
])//工具栏
.hideToolBar(false)//设置是否隐藏工具栏
.hideTitleBar(false)//设置是否隐藏标题栏
.hideBackButton(false)//设置隐藏标题栏中的返回键
.navBarWidth('50%')
.navBarPosition(NavBarPosition.Start)
.mode(NavigationMode.Auto)
.backButtonIcon(this.sIcon)//返回图标
.hideNavBar(false)//隐藏导航栏
.navDestination((name:string,param:number)=>{
promptAction.showToast({message:`${name}:${param}`})
})
.navBarWidthRange([300,600])//设置导航栏最小和最大宽度
.minContentWidth(390)
}
Navigation
Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。
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
menus(value: Array<NavigationMenuItem> | CustomBuilder)
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 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)
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Array<ToolbarItem> | CustomBuilder | 是 |
工具栏内容，使用Array<ToolbarItem>写法设置的工具栏有如下特性： 工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。 文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。 竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏下必须配合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: 显示返回键。 |
navBarWidth9+
navBarWidth(value: Length)
设置导航栏宽度。仅在Navigation组件分栏时生效。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Length | 是 |
导航栏宽度。 默认值：240 单位：vp undefined：行为不做处理，导航栏宽度与默认值保持一致。 |
navBarPosition9+
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)
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 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 |
navDestination10+
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组件。 |
navBarWidthRange10+
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 | 是 |
导航栏内容区最小宽度。 默认值：360 单位：vp undefined：行为不做处理，导航栏内容区最小宽度与默认值保持一致。 Auto模式断点计算：默认600vp，minNavBarWidth(240vp) + minContentWidth (360vp) |
@Builder navRouterTest(){
Navigation(){
NavRouter(){
Column(){
Text('111111111')
}
NavDestination(){
Text('具体内容')
}.backgroundColor('#aaa')
}
}
.title('页面跳转')
}
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
17
0- 0
已为社区贡献12条内容
所有评论(0)