
OpenHarmony应用开发-容器组件ListItem/Navigator/Panel
版本:v3.2 Release
ListItem
用来展示列表具体item,必须配合List来使用。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含单个子组件。
接口
ListItem(value?: string)
从API version 9开始,该接口支持在ArkTS卡片中使用。
属性
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
sticky(deprecated) | Sticky | 设置ListItem吸顶效果。 默认值:Sticky.None 从API version9开始废弃,推荐使用List组件sticky属性。 |
editable | boolean | EditMode | 当前ListItem元素是否可编辑,进入编辑模式后可删除或移动列表项。 默认值:false |
selectable8+ | boolean | 当前ListItem元素是否可以被鼠标框选。 说明: 外层List容器的鼠标框选开启时,ListItem的框选才生效。 默认值:true |
swipeAction9+ | { start?: CustomBuilder, end?:CustomBuilder, edgeEffect?: SwipeEdgeEffect, } | 用于设置ListItem的划出组件。 - start: ListItem向右划动时item左边的组件(List垂直布局时)或ListItem向下划动时item上方的组件(List水平布局时)。 - end: ListItem向左划动时item右边的组件(List垂直布局时)或ListItem向上划动时item下方的组件(List水平布局时)。 - edgeEffect: 滑动效果。 说明: start和end对应的@builder函数中顶层必须是单个组件,不能是if/else、ForEach、LazyForEach语句。 |
Sticky(deprecated)枚举说明
从API version9开始废弃,推荐使用List组件stickyStyle枚举。
名称 | 描述 |
None | 无吸顶效果。 |
Normal | 当前item吸顶。 |
Opacity | 当前item吸顶显示透明度变化效果。 |
EditMode枚举说明
名称 | 描述 |
None | 编辑操作不限制。 |
Deletable | 可删除。 |
Movable | 可移动。 |
SwipeEdgeEffect9+枚举说明
名称 | 描述 |
Spring | ListItem划动距离超过划出组件大小后可以继续划动,松手后按照弹簧阻尼曲线回弹。 |
None | ListItem划动距离不能超过划出组件大小。 |
事件
名称 | 功能描述 |
onSelect(event: (isSelected: boolean) => void)8+ | ListItem元素被鼠标框选的状态改变时触发回调。 isSelected:进入鼠标框选范围即被选中返回true, 移出鼠标框选范围即未被选中返回false。 |
示例
ListItemGroup
该组件用来展示列表item分组,宽度默认充满List组件,必须配合List组件来使用。
说明:
该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
使用说明
当ListItemGroup的父组件List的listDirection属性为Axis.Vertical时,不允许设置ListItemGroup组件的height属性。ListItemGroup的高度为header高度、footer高度和所有ListItem布局后总高度之和。当父组件List的listDirection属性为Axis.Horizontal时,不允许设置ListItemGroup组件的width属性。ListItemGroup的宽度为header宽度、footer宽度和所有ListItem布局后总宽度之和。
当前ListItemGroup内部的ListItem组件不支持编辑、框选、拖拽功能,即ListItem组件的editable、selectable属性不生效。
子组件
包含ListItem子组件。
接口
ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string})
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
header | 否 | 设置ListItemGroup头部组件。 | |
footer | 否 | 设置ListItemGroup尾部组件。 | |
space | number | string | 否 | 列表项间距。只作用于ListItem与ListItem之间,不作用于header与ListItem、footer与ListItem之间。 |
属性
名称 | 参数类型 | 描述 |
divider | { strokeWidth: Length, color?: ResourceColor, startMargin?: Length, endMargin?: Length} | null | 用于设置ListItem分割线样式,默认无分割线。 strokeWidth: 分割线的线宽。 color: 分割线的颜色。 startMargin: 分割线距离列表侧边起始端的距离。 endMargin: 分割线距离列表侧边结束端的距离。 |
说明:
ListItemGroup组件不支持设置通用属性aspectRatio。
ListItemGroup组件如果主轴方向是垂直方向时,设置通用属性height属性不生效。
ListItemGroup组件如果主轴方向是水平方向时,设置通用属性width属性不生效。
示例
Navigator
路由容器组件,提供路由跳转能力。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
接口
Navigator(value?: {target: string, type?: NavigationType})
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
target | string | 是 | 指定跳转目标页面的路径。 |
type | 否 | 指定路由方式。 默认值:NavigationType.Push |
NavigationType枚举说明
名称 | 描述 |
Push | 跳转到应用内的指定页面。 |
Replace | 用应用内的某个页面替换当前页面,并销毁被替换的页面。 |
Back | 返回到指定的页面。指定的页面不存在栈中时不响应。未传入指定的页面时返回上一页。 |
属性
名称 | 参数 | 描述 |
active | boolean | 当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作。 |
params | object | 跳转时要同时传递到目标页面的数据,可在目标页面使用router.getParams()获得。 |
target | string | 设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。 |
type | 设置路由方式。 默认值:NavigationType.Push |
示例
Panel
可滑动面板,提供一种轻量的内容展示窗口,方便在不同尺寸中切换。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
说明:
子组件类型:系统组件和自定义组件,支持渲染控制类型(if/else、ForEach和LazyForEach)。
接口
Panel(show: boolean)
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
show | boolean | 是 | 控制Panel显示或隐藏。 说明: 如果设置为false时,则不占位隐藏。Visible.None或者show之间有一个生效时,都会生效不占位隐藏。 |
属性
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
type | 设置可滑动面板的类型。 默认值:PanelType.Foldable | |
mode | 设置可滑动面板的初始状态。 Minibar类型默认值:PanelMode.Mini;其余类型默认值:PanelMode.Half | |
dragBar | boolean | 设置是否存在dragbar,true表示存在,false表示不存在。 默认值:true |
fullHeight | string | number | 指定PanelMode.Full状态下的高度。 默认值:当前组件主轴大小减去8vp空白区 说明: 不支持设置百分比。 |
halfHeight | string | number | 指定PanelMode.Half状态下的高度。 默认值:当前组件主轴大小的一半。 说明: 不支持设置百分比。 |
miniHeight | string | number | 指定PanelMode.Mini状态下的高度。 默认值:48 单位:vp 说明: 不支持设置百分比。 |
show | boolean | 当滑动面板弹出时调用。 |
backgroundMask9+ | 指定Panel的背景蒙层。 |
PanelType枚举说明
名称 | 描述 |
Minibar | 提供minibar和类全屏展示切换效果。 |
Foldable | 内容永久展示类,提供大(类全屏)、中(类半屏)、小三种尺寸展示切换效果。 |
Temporary | 内容临时展示区,提供大(类全屏)、中(类半屏)两种尺寸展示切换效果。 |
PanelMode枚举说明
名称 | 描述 |
Mini | 类型为minibar和foldable时,为最小状态;类型为temporary,则不生效。 |
Half | 类型为foldable和temporary时,为类半屏状态;类型为minibar,则不生效。 |
Full | 类全屏状态。 |
事件
除支持通用事件外,还支持以下事件:
名称 | 功能描述 |
onChange(event: (width: number, height: number, mode: PanelMode) => void) | 当可滑动面板发生状态变化时触发, 返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。 |
onHeightChange(callback: (value: number) => void)9+ | 当可滑动面板发生高度变化时触发,返回的height值为内容区高度值,默认返回值单位为px。当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因,panel最高只能滑到 fullHeight-8vp。 |
示例
