
HarmonyOS API:容器组件
版本:v3.1 Beta
ListItem
更新时间: 2023-02-17 09:19
用来展示列表具体item,必须配合List来使用。
说明
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含单个子组件。
接口
ListItem(value?: string)
属性
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
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: 滑动效果。 |
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
更新时间: 2023-02-17 09:19
该组件用来展示列表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: 分割线距离列表侧边结束端的距离。 |
示例
Navigator
更新时间: 2023-03-03 17:21
路由容器组件,提供路由跳转能力。
说明
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
接口
Navigator(value?: {target: string, type?: NavigationType})
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
target | string | 是 | 指定跳转目标页面的路径。 |
type | NavigationType | 否 | 指定路由方式。 默认值:NavigationType.Push |
NavigationType枚举说明
名称 | 描述 |
Push | 跳转到应用内的指定页面。 |
Replace | 用应用内的某个页面替换当前页面,并销毁被替换的页面。 |
Back | 返回到指定的页面。指定的页面不存在栈中时不响应。未传入指定的页面时返回上一页。 |
属性
名称 | 参数 | 描述 |
active | boolean | 当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作。 |
params | object | 跳转时要同时传递到目标页面的数据,可在目标页面使用router.getParams()获得。 |
target | string | 设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。 |
type | NavigationType | 设置路由方式。 默认值:NavigationType.Push |
示例
