现列表项ListItem滑动显示可置顶或删除

在使用列表List的应用中，可以滑动列表项ListItem显示可置顶或删除列表项，快速完成对列表项的操作。List垂直布局时滑动操作支持左滑和右滑。

HarmonyOS

kraml

2024-05-26 15:54:08

2354浏览

回答 1

按赞同

按时间

flyCloud00

1.实现自定义组件。本示例使用Row、text组件组装一个包含文本按钮的组件。在定义组件时，给定入参便于后续定位到被滑动的ListItem。本示例中，当滑动出菜单后，点击删除按钮可以删除当前ListItem，点击置顶可将子项置顶。

@Builder itemEnd(index:number) { 
  Row(){ 
    Text("置顶") 
        .padding(5) 
        .fontSize(16) 
        .backgroundColor('#808080') 
        .fontColor(Color.White) 
        .textAlign(TextAlign.Center) 
        .borderRadius(16) 
        .width(100) 
        .height('100%') 
        .onClick(() => { 
           this.itemIndexArr.splice(0,0,this.itemIndexArr[index]) 
           this.itemIndexArr.splice(index+1,1) 
        }) 
    Text("删除") 
        .padding(5) 
        .fontSize(16) 
        .backgroundColor('#FF0000') 
        .fontColor(Color.White) 
        .borderRadius(16) 
        .textAlign(TextAlign.Center) 
        .width(100) 
        .height('100%') 
        .onClick(() => { 
          this.itemIndexArr.splice(index,1) 
        }) 
  }.padding(4).justifyContent(FlexAlign.SpaceEvenly) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

2.使用ForEach循环渲染列表，并为ListItem设置swipeAction属性为上述自定义组件，设置属性时绑定入参

swipeAction支持设置不同的滑动方向：

start：List垂直布局时，向右滑动ListItem时在左侧显示的组件。本示例中未配置。
end：List垂直布局时，向左滑动ListItem时在右侧显示的组件。

build() { 
  Column() { 
    List({space:10}) { 
      ForEach(this.itemIndexArr,(item,index) =>{ 
        ListItem(){ 
          Text('' + item) 
            .width('100%') 
            .height(100) 
            .fontSize(16) 
            .margin({ top: 10 }) 
            .borderRadius(16) 
            .textAlign(TextAlign.Center) 
            .backgroundColor(Color.White) 
        }.swipeAction({ end:this.itemEnd.bind(this,index), edgeEffect: SwipeEdgeEffect.Spring}) 
      },item=>item) 
    } 
  } 
  .padding(10) 
  .backgroundColor(0xDCDCDC) 
  .width('100%') 
  .height('100%') 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

完整代码

@Entry 
@Component 
struct Index { 
  @State itemIndexArr:number[] = [1,2,3,4,5,6,7,8,9,10] 
  
  @Builder itemEnd(index:number) { 
    Row(){ 
      Text("置顶") 
        .padding(5) 
        .fontSize(16) 
        .backgroundColor('#808080') 
        .fontColor(Color.White) 
        .textAlign(TextAlign.Center) 
        .borderRadius(16) 
        .width(100) 
        .height('100%') 
        .onClick(() => { 
           this.itemIndexArr.splice(0,0,this.itemIndexArr[index]) 
           this.itemIndexArr.splice(index+1,1) 
        }) 
      Text("删除") 
        .padding(5) 
        .fontSize(16) 
        .backgroundColor('#FF0000') 
        .fontColor(Color.White) 
        .borderRadius(16) 
        .textAlign(TextAlign.Center) 
        .width(100) 
        .height('100%') 
        .onClick(() => { 
          this.itemIndexArr.splice(index,1) 
        }) 
    }.padding(4).justifyContent(FlexAlign.SpaceEvenly) 
  } 
  
  build() { 
    Column() { 
      List({space:10}) { 
        ForEach(this.itemIndexArr,(item,index) =>{ 
          ListItem(){ 
            Text('' + item) 
              .width('100%') 
              .height(100) 
              .fontSize(16) 
              .margin({ top: 10 }) 
              .borderRadius(16) 
              .textAlign(TextAlign.Center) 
              .backgroundColor(Color.White) 
          }.swipeAction({ end:this.itemEnd.bind(this,index), edgeEffect: SwipeEdgeEffect.Spring}) 
        },item=>item) 
      } 
    } 
    .padding(10) 
    .backgroundColor(0xDCDCDC) 
    .width('100%') 
    .height('100%') 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.

2024-05-27 21:06:10

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

现列表项ListItem滑动显示可置顶或删除

订阅鸿蒙技术特刊，精选内容抢先看