!19139 list文档增加用户实现删除方案demo

Merge pull request !19139 from wind/cherry-pick-1685694528

zh-cn/application-dev/reference/arkui-ts/ts-container-list.md

@@ -55,7 +55,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
 | divider                      | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?:[ResourceColor](ts-types.md#resourcecolor),<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>}&nbsp;\|&nbsp;null | 设置ListItem分割线样式，默认无分割线。<br/>- strokeWidth:&nbsp;分割线的线宽。<br/>- color:&nbsp;分割线的颜色。<br/>- startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>- endMargin:&nbsp;分割线与列表侧边结束端的距离。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>endMargin +startMargin 不能超过列宽度。 <br/>startMargin和endMargin不支持设置百分比。<br/>List的分割线画在主轴方向两个子组件之间，第一个子组件上方和最后一个子组件下方不会绘制分割线。<br/>多列模式下，ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算，其他情况从List交叉轴方向起始边开始计算。 |
 | scrollBar      | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值：BarState.Off<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>API version 9及以下版本默认值为BarState.Off，API version 10的默认值为BarState.Auto。 |
 | cachedCount | number                                   | 设置列表中ListItem/ListItemGroup的预加载数量，只在[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)中生效，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/arkts-performance-improvement-recommendation.md#减少应用滑动白块)。<br/>默认值：1<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>单列模式下，会在List显示的ListItem前后各缓存cachedCount个ListItem。<br/>多列模式下， 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 |
-| editMode<sup>(deprecated)</sup> | boolean | 声明当前List组件是否处于可编辑模式。<br/>从API version9开始废弃。<br/>默认值：false |
+| editMode<sup>(deprecated)</sup> | boolean | 声明当前List组件是否处于可编辑模式。<br/>从API version9开始废弃。可参考[示例3](#示例3)实现删除选中的list项。<br/>默认值：false |
 | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果，支持弹簧效果和阴影效果。<br/>默认值：EdgeEffect.Spring<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
 | chainAnimation | boolean | 设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。<br/>默认值：false<br/>-&nbsp;false：不启用链式联动。<br/>-&nbsp;true：启用链式联动。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：**<br/>链式动效生效后，List的分割线不显示。<br>链式动效生效需要满足以下前提条件：<br> -&nbsp; List边缘效果为Spring类型<br> -&nbsp; List没有启用多列模式 |
 |chainAnimationOptions<sup>10+</sup>| [ChainAnimationOptions](#chainanimationoptions10对象说明) | 设置链式联动动效参数。<br>**系统API：** 此接口为系统接口。 |
@@ -159,7 +159,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
 >  - 绑定onDragStart事件，且事件回调中返回浮动UI布局。
 
 
-## 示例
+## 示例1
 
 ```ts
 // xxx.ets
@@ -198,6 +198,9 @@ struct ListExample {
 
 ![zh-cn_image_0000001174264378](figures/zh-cn_image_0000001174264378.gif)
 
+
+## 示例2
+
 ```ts
 // xxx.ets
 @Entry
@@ -224,7 +227,6 @@ struct ListLanesExample {
       }
       .height(300)
       .width("90%")
-      .editMode(true)
       .border({ width: 3, color: Color.Red })
       .lanes({ minLength: 40, maxLength: 40 })
       .alignListItem(this.alignListItem)
@@ -244,3 +246,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