• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 如何实现列表项ListItem滑动显示快捷菜单
2
3## 场景说明
4
5在使用列表List的应用中，可以滑动列表项ListItem显示快捷菜单，快速完成对列表项的操作。List垂直布局时滑动操作支持左滑和右滑。
6
7## 效果呈现
8
9本示例最终效果如下：
10
11![listitem-slide](figures/listitem-slide-demo.gif)
12
13## 运行环境
14
15- IDE：DevEco Studio 3.1 Beta2
16- SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
17
18## 实现原理
19
201. 自定义组件实现划出后的快捷菜单。
21
222. 利用ListItem组件的swipeAction属性，设置ListItem的划出组件为上述自定义组件。
23
24## 开发步骤
25
261. 实现自定义组件。本示例使用Row、Image组件组装一个包含两个图标按钮的快捷菜单组件。在定义组件时，给定入参便于后续定位到被滑动的ListItem。本示例中，当滑动出菜单后，点击删除按钮可以删除当前ListItem。
27
28   ```ts
29   @Builder itemEnd(index:number) {
30     Row () {
31       Image($r("app.media.ic_public_settings_filled"))
32         ...
33         })
34       Image($r("app.media.ic_public_delete_filled"))
35         ...
36         .onClick(()=>{
37           this.itemIndexArr.splice(index,1)
38         })
39     }.padding(4).justifyContent(FlexAlign.SpaceEvenly)
40   }
41   ```
42
432. 使用ForEach循环渲染列表，并为ListItem设置swipeAction属性为上述自定义组件，设置属性时绑定入参。
44
45   swipeAction支持设置不同的滑动方向：
46
47   * start：List垂直布局时，向右滑动ListItem时在左侧显示的组件。本示例中未配置。
48
49   * end：List垂直布局时，向左滑动ListItem时在右侧显示的组件。
50
51   ```ts
52   ForEach(this.itemIndexArr,(item,index) =>{
53     ListItem(){
54       Text('' + item)
55         ...
56     }.swipeAction({ end:this.itemEnd.bind(this,index), edgeEffect: SwipeEdgeEffect.Spring})
57   },item=>item)
58   ```
59
60## 完整代码
61
62通过上述步骤可以完成整个示例的开发，完整代码如下：
63
64```ts
65@Entry
66@Component
67struct Index {
68  @State itemIndexArr:number[] = [1,2]
69  @Builder itemEnd(index:number) {
70    Row () {
71      Image($r("app.media.ic_public_settings_filled"))
72        .width(32)
73        .height(32)
74        .margin(4)
75        .onClick(()=>{
76          console.info('Click Setting Icon')
77        })
78      Image($r("app.media.ic_public_delete_filled"))
79        .width(32)
80        .height(32)
81        .margin(4)
82        .onClick(()=>{
83          this.itemIndexArr.splice(index,1)
84        })
85    }.padding(4).justifyContent(FlexAlign.SpaceEvenly)
86  }
87
88  build() {
89    Column() {
90      List({space:10}) {
91        ForEach(this.itemIndexArr,(item,index) =>{
92          ListItem(){
93            Text('' + item)
94              .width('100%')
95              .height(100)
96              .fontSize(16)
97              .margin({ top: 10 })
98              .borderRadius(16)
99              .textAlign(TextAlign.Center)
100              .backgroundColor(Color.White)
101          }.swipeAction({ end:this.itemEnd.bind(this,index), edgeEffect: SwipeEdgeEffect.Spring})
102        },item=>item)
103      }
104
105      Row() {
106        Image($r("app.media.ic_public_add_norm"))
107          .width(40)
108          .height(40)
109          .margin(4)
110          .onClick(()=>{
111            this.itemIndexArr.push(this.itemIndexArr.length + 1)
112          })
113      }
114
115    }
116    .padding(10)
117    .backgroundColor(0xDCDCDC)
118    .width('100%')
119    .height('100%')
120  }
121}
122```