diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index aa2cbedbb15bc65bc7bf07ef96aba5ad8674541e..c22e5d29375618f101b422f54b18bd7e8206f665 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -22,10 +22,10 @@ List(value:{space?: number, initialIndex?: number}) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | space | number | 否 | 0 | 列表项间距。 | - | initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效。 | + | space | number | 否 | 0 | 列表项间距。 | + | initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效。 | ## 属性 @@ -39,19 +39,30 @@ List(value:{space?: number, initialIndex?: number}) | chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。
- false:不启用链式联动。
- true:启用链式联动。 | | multiSelectable8+ | boolean | false | 是否开启鼠标框选。
- false:关闭框选。
- true:开启框选。 | | restoreId8+ | number | - | 组件迁移标识符,标识后的组件在应用迁移时,组件状态会被迁移到被拉起方的同标识组件。
列表组件状态,包括起始位置显示的item序号。 | +| lanes9+ | number \|
{
minLength: Length,
maxLength: Length
} | 1 | 以列模式为例(listDirection为Axis.Vertical):
lanes用于决定List组件在交叉轴方向按几列布局,规则如下:
- lanes为指定的数量时,根据指定的数量与List组件的交叉轴宽度来决定每列的宽度;
- lane设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的宽度符合最小宽度限制。例如在列模式下,设置了{minLength: 40vp,maxLength: 60vp},则当List组件宽度为70vp时,ListItem为一列,并且根据alignListItem属性做靠左、居中或者靠右布局;当List组件宽度变化至80vp时,符合两倍的minLength,则ListItem自适应为两列。 | +| alignListItem9+ | ListItemAlign | ListItemAlign.Center | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时,ListItem在List交叉轴方向的布局方式,默认为居中。 | - EdgeEffect枚举说明 - | 名称 | 描述 | - | -------- | -------- | - | Spring | 弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。 | - | None | 滑动到边缘后无效果。 | + + | 名称 | 描述 | + | ------ | ------------------------------------------------------------ | + | Spring | 弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。 | + | None | 滑动到边缘后无效果。 | + +- ListItemAlign枚举说明 + + | 名称 | 描述 | + | ------ | -------------------------------------- | + | Start | ListItem在List中,交叉轴方向首部对齐。 | + | Center | ListItem在List中,交叉轴方向居中对齐。 | + | End | ListItem在List中,交叉轴方向尾部对齐。 | ## 事件 -| 名称 | 功能描述 | +| 名称 | 功能描述 | | -------- | -------- | -| onItemDelete(index: number) => boolean | 列表项删除时触发。 | +| onItemDelete(index: number) => boolean | 列表项删除时触发。 | | onScrollIndex(firstIndex: number, lastIndex: number) => void | 当前列表显示的起始位置和终止位置发生变化时触发。 | > **说明:** @@ -120,3 +131,49 @@ struct ListExample { ``` ![zh-cn_image_0000001174264378](figures/zh-cn_image_0000001174264378.gif) + +```ts +// xxx.ets +@Entry +@Component +struct ListLanesExample { + @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"] + @State alignListItem: ListItemAlign = ListItemAlign.Start + + 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) + } + .border({ width: 2, color: Color.Green }) + }, item => item) + } + .height(300) + .width("90%") + .editMode(true) + .border({ width: 3, color: Color.Red }) + .lanes({ minLength: 40, maxLength: 60 }) + .alignListItem(this.alignListItem) + + Button("点击更改alignListItem:" + this.alignListItem).onClick(() => { + if (this.alignListItem == ListItemAlign.Start) { + this.alignListItem = ListItemAlign.Center + } else if (this.alignListItem == ListItemAlign.Center) { + this.alignListItem = ListItemAlign.End + } else { + this.alignListItem = ListItemAlign.Start + } + }) + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} +``` +