diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/list3.gif b/zh-cn/application-dev/reference/arkui-ts/figures/list3.gif new file mode 100644 index 0000000000000000000000000000000000000000..fee786913eb846e96189bf852e199d9185c7dafa Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/list3.gif differ 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 03f978d50019cbefa43fa78128794346aece6db1..092482cb09acfd751f29da1010e840e53c28ce91 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 @@ -56,7 +56,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? | divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md#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](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值:BarState.Off
从API version 9开始,该接口支持在ArkTS卡片中使用。。 | | cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量,只在[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)中生效,其中ListItemGroup将作为一个整体进行计算,ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/arkts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值:1
从API version 9开始,该接口支持在ArkTS卡片中使用。
**说明:**
单列模式下,会在List显示的ListItem前后各缓存cachedCount个ListItem。
多列模式下, 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 | -| editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。
默认值:false | +| editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。可参考[示例3](#示例3)实现删除选中的list项。
默认值:false | | edgeEffect | [EdgeEffect](ts-appendix-enums.md#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卡片中使用。 | @@ -134,7 +134,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? > - 绑定onDragStart事件,且事件回调中返回浮动UI布局。 -## 示例 +## 示例1 ```ts // xxx.ets @@ -173,6 +173,9 @@ struct ListExample { ![zh-cn_image_0000001174264378](figures/zh-cn_image_0000001174264378.gif) + +## 示例2 + ```ts // xxx.ets @Entry @@ -199,7 +202,6 @@ struct ListLanesExample { } .height(300) .width("90%") - .editMode(true) .border({ width: 3, color: Color.Red }) .lanes({ minLength: 40, maxLength: 40 }) .alignListItem(this.alignListItem) @@ -219,3 +221,57 @@ struct ListLanesExample { ``` ![list](figures/list1.gif) + + +## 示例3 + +```ts +// xxx.ets +@Entry +@Component +struct ListExample{ + @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + @State editFlag: boolean = false + + build(){ + Stack({alignContent: Alignment.TopStart}) { + Column(){ + List({space:20, initialIndex:0}) { + ForEach(this.arr, (item, index) => { + ListItem() { + Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Center}) { + Text('' + item) + .width('100%') + .height(80) + .fontSize(20) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0xFFFFFF) + .flexShrink(1) + if (this.editFlag) { + Button() { + Text("delete").fontSize(16) + }.width('30%').height(40) + .onClick(() => { + console.info(this.arr[index] + 'Delete') + this.arr.splice(index, 1) + console.info(JSON.stringify(this.arr)) + this.editFlag = false + }).stateEffect(true) + } + } + } + }, item => item) + }.width('90%') + }.width('100%') + + Button('edit list') + .onClick(() => { + this.editFlag = !this.editFlag + }).margin({ top: 5, left: 20 }) + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} +``` + +![list](figures/list3.gif) \ No newline at end of file