ArKTS基础组件2

font10+

font(value: Font)

统一设置Menu中所有文本的尺寸。

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

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

参数：

fontColor10+

fontColor(value: ResourceColor)

统一设置Menu中所有文本的颜色。

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

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

参数：

radius10+

radius(value: Dimension | BorderRadiuses)

设置Menu边框圆角半径。

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

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

参数：

width10+

width(value: Length)

设置Menu边框宽度，支持设置的最小宽度为64vp。

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

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

参数：

menuItemDivider12+

menuItemDivider(options: DividerStyleOptions | undefined)

设置menuItem分割线样式, 不设置该属性则不展示分割线。

startMargin + endMargin 超过组件宽度后startMargin和endMargin会被置0。

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

参数：

menuItemGroupDivider12+

menuItemGroupDivider(options: DividerStyleOptions | undefined)

设置menuItemGroup上下分割线的样式, 不设置该属性则默认展示分割线。

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

参数：

subMenuExpandingMode12+

subMenuExpandingMode(mode: SubMenuExpandingMode)

设置Menu子菜单展开样式。

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

参数：

MenuItem

用来展示菜单Menu中具体的item菜单项。

selected

selected(value: boolean)

设置菜单项是否选中。

从API version 10开始，该参数支持$$双向绑定变量。

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

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

参数：

selectIcon

selectIcon(value: boolean | ResourceStr | SymbolGlyphModifier)

设置当菜单项被选中时，是否显示被选中的图标。

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

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

参数：

contentFont10+

contentFont(value: Font)

设置菜单项中内容信息的字体样式。

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

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

参数：

contentFontColor10+

contentFontColor(value: ResourceColor)

设置菜单项中内容信息的字体颜色。

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

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

参数：

labelFont10+

labelFont(value: Font)

设置菜单项中标签信息的字体样式。

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

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

参数：

labelFontColor10+

labelFontColor(value: ResourceColor)

设置菜单项中标签信息的字体颜色。

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

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

参数：

  @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

参数：

subTitle(deprecated)

subTitle(value: string)

设置页面副标题。

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

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

参数：

menus

menus(value: Array<NavigationMenuItem> | CustomBuilder)

参数：

titleMode

titleMode(value: NavigationTitleMode)

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

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

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

参数：

toolBar(deprecated)

toolBar(value: object | CustomBuilder)

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

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

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

参数：

hideTitleBar

hideTitleBar(value: boolean)

设置是否隐藏标题栏。

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

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

参数：

hideBackButton

hideBackButton(value: boolean)

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

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

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

参数：

navBarWidth9+

navBarWidth(value: Length)

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

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

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

参数：

navBarPosition9+

navBarPosition(value: NavBarPosition)

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

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

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

参数：

mode9+

mode(value: NavigationMode)

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

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

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

参数：

backButtonIcon9+

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

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

参数：

navDestination10+

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

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

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

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

参数：

navBarWidthRange10+

navBarWidthRange(value: [Dimension, Dimension])

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

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

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

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

参数：

minContentWidth10+

minContentWidth(value: Dimension)

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

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

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

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

参数：

ignoreLayoutSafeArea12+

ignoreLayoutSafeArea(types?: Array<LayoutSafeAreaType>, edges?: Array<LayoutSafeAreaEdge>)

控制组件的布局，使其扩展到非安全区域

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

参数：

systemBarStyle12+

systemBarStyle(style: Optional<SystemBarStyle>)

当Navigation中显示Navigation首页时，设置对应系统状态栏的样式。

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

参数：

onTitleModeChange

onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void)

当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。

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

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

参数：

onNavBarStateChange9+

onNavBarStateChange(callback: (isVisible: boolean) => void)

导航栏显示状态切换时触发该回调。

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

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

参数：

onNavigationModeChange11+

onNavigationModeChange(callback: (mode: NavigationMode) => void)

当Navigation首次显示或者单双栏状态发生变化时触发该回调。

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

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

参数：

customNavContentTransition11+

customNavContentTransition(delegate(from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => NavigationAnimatedTransition | undefined)

自定义转场动画回调。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

参数：

返回值：

NavPathStack10+

Navigation路由栈，允许被继承12+。开发者可以在派生类中新增属性方法，也可以重写基类NavPathStack的方法。派生类对象可以替代基类NavPathStack对象使用。使用示例参见示例10。

pushPath10+

pushPath(info: NavPathInfo, animated?: boolean): void

将info指定的NavDestination页面信息入栈。

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

参数：

pushPath12+

pushPath(info: NavPathInfo, options?: NavigationOptions): void

将info指定的NavDestination页面信息入栈，具体根据options中指定不同的LaunchMode，有不同的行为。

参数：

pushPathByName10+

pushPathByName(name: string, param: unknown, animated?: boolean): void

将name指定的NavDestination页面信息入栈，传递的数据为param。

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

参数：

pushPathByName11+

pushPathByName(name: string, param: Object, onPop: Callback<PopInfo>, animated?: boolean): void

将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

pushDestination11+

pushDestination(info: NavPathInfo, animated?: boolean): Promise<void>

将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

@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

参数：

subTitle(deprecated)

subTitle(value: string)

设置页面副标题。

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

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

参数：

menus

menus(value: Array<NavigationMenuItem> | CustomBuilder)

参数：

titleMode

titleMode(value: NavigationTitleMode)

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

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

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

参数：

toolBar(deprecated)

toolBar(value: object | CustomBuilder)

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

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

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

参数：

object类型说明：

toolbarConfiguration10+

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

hideToolBar

hideToolBar(value: boolean)

设置是否隐藏工具栏。

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

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

参数：

hideTitleBar

hideTitleBar(value: boolean)

设置是否隐藏标题栏。

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

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

参数：

hideBackButton

hideBackButton(value: boolean)

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

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

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

参数：

navBarWidth9+

navBarWidth(value: Length)

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

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

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

参数：

navBarPosition9+

navBarPosition(value: NavBarPosition)

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

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

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

参数：

mode9+

mode(value: NavigationMode)

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

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

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

参数：

backButtonIcon9+

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

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

参数：

navDestination10+

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

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

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

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

参数：

navBarWidthRange10+

navBarWidthRange(value: [Dimension, Dimension])

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

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

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

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

参数：

minContentWidth10+

minContentWidth(value: Dimension)

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

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

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

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

参数：

  @Builder navRouterTest(){Navigation(){NavRouter(){Column(){Text('111111111')}NavDestination(){Text('具体内容')}.backgroundColor('#aaa')}}.title('页面跳转')}