鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之List容器组件
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之List容器组件。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之List容器组件
一、操作环境
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1
二、List容器组件
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
子组件
包含ListItem、ListItemGroup子组件。
接口
List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
参数
|
参数名 |
参数类型 |
必填 |
参数描述 |
|---|---|---|---|
|
space |
number | string |
否 |
子组件主轴方向的间隔。 默认值：0 说明： 设置为除-1外其他负数或百分比时，按默认值显示。 space参数值小于List分割线宽度时，子组件主轴方向的间隔取分割线宽度。 |
|
initialIndex |
number |
否 |
设置当前List初次加载时视口起始位置显示的item的索引值。 默认值：0 说明： 设置为除-1外其他负数或超过了当前List最后一个item的索引值时视为无效取值，无效取值按默认值显示。 |
|
scroller |
否 |
可滚动组件的控制器。用于与可滚动组件进行绑定。 说明： 不允许和其他滚动类组件绑定同一个滚动控制对象。 |
属性
除支持通用属性外，还支持以下属性：
|
名称 |
参数类型 |
描述 |
|---|---|---|
|
listDirection |
设置List组件排列方向。 默认值：Axis.Vertical 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
|
|
divider |
{ strokeWidth: Length, color?:ResourceColor, startMargin?: Length, endMargin?: Length } | null |
设置ListItem分割线样式，默认无分割线。 - strokeWidth: 分割线的线宽。 - color: 分割线的颜色。 - startMargin: 分割线与列表侧边起始端的距离。 - endMargin: 分割线与列表侧边结束端的距离。 从API version 9开始，该接口支持在ArkTS卡片中使用。 endMargin +startMargin 不能超过列宽度。 startMargin和endMargin不支持设置百分比。 List的分割线画在主轴方向两个子组件之间，第一个子组件上方和最后一个子组件下方不会绘制分割线。 多列模式下，ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算，其他情况从List交叉轴方向起始边开始计算。 |
|
scrollBar |
设置滚动条状态。 默认值：BarState.Off 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
|
|
cachedCount |
number |
设置列表中ListItem/ListItemGroup的预加载数量，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考减少应用白块说明。 默认值：1 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： 单列模式下，会在List显示的ListItem前后各缓存cachedCount个ListItem。 多列模式下， 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 |
|
editMode(deprecated) |
boolean |
声明当前List组件是否处于可编辑模式。可参考示例3实现删除选中的list项。 从API version9开始废弃。 默认值：false |
|
edgeEffect |
设置组件的滑动效果。 默认值：EdgeEffect.Spring 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
|
|
chainAnimation |
boolean |
设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。 默认值：false - false：不启用链式联动。 - true：启用链式联动。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
|
multiSelectable8+ |
boolean |
是否开启鼠标框选。 默认值：false - false：关闭框选。 - true：开启框选。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
|
lanes9+ |
number | LengthConstrain |
以列模式为例（listDirection为Axis.Vertical）: lanes用于决定List组件在交叉轴方向按几列布局。 默认值：1 规则如下： - lanes为指定的数量时，根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。 - lanes设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的交叉轴尺寸符合最小限制。 - lanes设置了{minLength，maxLength}，如果父组件交叉轴方向尺寸约束为无穷大时，固定按一列排列，列宽度按显示区域内最大的ListItem计算。 - ListItemGroup在多列模式下也是独占一行，ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。 - lanes设置了{minLength，maxLength}时，计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。 该接口支持在ArkTS卡片中使用。 |
|
alignListItem9+ |
ListItemAlign |
List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。 默认值：ListItemAlign.Start 该接口支持在ArkTS卡片中使用。 |
|
sticky9+ |
StickyStyle |
配合ListItemGroup组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。 默认值：StickyStyle.None 该接口支持在ArkTS卡片中使用。 说明： sticky属性可以设置为 StickyStyle.Header | StickyStyle.Footer 以同时支持header吸顶和footer吸底。 |
ListItemAlign枚举说明
|
名称 |
描述 |
|---|---|
|
Start |
ListItem在List中，交叉轴方向首部对齐。 |
|
Center |
ListItem在List中，交叉轴方向居中对齐。 |
|
End |
ListItem在List中，交叉轴方向尾部对齐。 |
StickyStyle枚举说明
|
名称 |
描述 |
|---|---|
|
None |
ListItemGroup的header不吸顶，footer不吸底。 |
|
Header |
ListItemGroup的header吸顶，footer不吸底。 |
|
Footer |
ListItemGroup的footer吸底，header不吸顶。 |
说明
List组件通用属性clip的默认值为true。
三、示例
代码
// xxx.ets
@Entry
@Component
struct ListExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, item => item)
}
.listDirection(Axis.Vertical) // 排列方向
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
.onScrollIndex((firstIndex: number, lastIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
})
.width('90%')
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
.padding({ top: 5 })
}
}示例图片
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马？
惟有点赞加关注大军。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
9
0- 0
已为社区贡献13条内容
所有评论(0)