OpenHarmony开发者论坛

标题: 如何实现列表项ListItem滑动显示快捷菜单? [打印本页]
作者: 清风明月    时间: 2023-9-4 10:34
标题: 如何实现列表项ListItem滑动显示快捷菜单?
【问题描述】

在使用列表List的应用中，支持滑动列表项ListItem显示快捷菜单，快速完成对列表项的操作。List垂直布局时滑动操作支持左滑和右滑，类似备忘录的效果，希望大佬提供开发思路，如果有示例就更好了。
(, 下载次数: 0)


【运行环境】
IDE：DevEco Studio 3.1 Beta2
SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)



作者: hyacinth养花人    时间: 2023-9-5 18:25
先看下显示效果：

(, 下载次数: 0)

实现原理


1. 自定义组件实现划出后的快捷菜单。

2. 利用ListItem组件的swipeAction属性，设置ListItem的划出组件为上述自定义组件。



开发步骤


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

  1.    @Builder itemEnd(index:number) {
  2.      Row () {
  3.        Image($r("app.media.ic_public_settings_filled"))
  4.          ...
  5.          })
  6.        Image($r("app.media.ic_public_delete_filled"))
  7.          ...
  8.          .onClick(()=>{
  9.            this.itemIndexArr.splice(index,1)
  10.          })
  11.      }.padding(4).justifyContent(FlexAlign.SpaceEvenly)
  12.    }
复制代码


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

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

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

   * end：List垂直布局时，向左滑动ListItem时在右侧显示的组件。

  1.    ForEach(this.itemIndexArr,(item,index) =>{
  2.      ListItem(){
  3.        Text('' + item)
  4.          ...
  5.      }.swipeAction({ end:this.itemEnd.bind(this,index), edgeEffect: SwipeEdgeEffect.Spring})
  6.    },item=>item)
复制代码

完整代码

通过上述步骤可以完成整个示例的开发，完整代码如下：

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State itemIndexArr:number[] = [1,2]
  5.   @Builder itemEnd(index:number) {
  6.     Row () {
  7.       Image($r("app.media.ic_public_settings_filled"))
  8.         .width(32)
  9.         .height(32)
  10.         .margin(4)
  11.         .onClick(()=>{
  12.           console.info('Click Setting Icon')
  13.         })
  14.       Image($r("app.media.ic_public_delete_filled"))
  15.         .width(32)
  16.         .height(32)
  17.         .margin(4)
  18.         .onClick(()=>{
  19.           this.itemIndexArr.splice(index,1)
  20.         })
  21.     }.padding(4).justifyContent(FlexAlign.SpaceEvenly)
  22.   }

  24.   build() {
  25.     Column() {
  26.       List({space:10}) {
  27.         ForEach(this.itemIndexArr,(item,index) =>{
  28.           ListItem(){
  29.             Text('' + item)
  30.               .width('100%')
  31.               .height(100)
  32.               .fontSize(16)
  33.               .margin({ top: 10 })
  34.               .borderRadius(16)
  35.               .textAlign(TextAlign.Center)
  36.               .backgroundColor(Color.White)
  37.           }.swipeAction({ end:this.itemEnd.bind(this,index), edgeEffect: SwipeEdgeEffect.Spring})
  38.         },item=>item)
  39.       }

  41.       Row() {
  42.         Image($r("app.media.ic_public_add_norm"))
  43.           .width(40)
  44.           .height(40)
  45.           .margin(4)
  46.           .onClick(()=>{
  47.             this.itemIndexArr.push(this.itemIndexArr.length + 1)
  48.           })
  49.       }

  51.     }
  52.     .padding(10)
  53.     .backgroundColor(0xDCDCDC)
  54.     .width('100%')
  55.     .height('100%')
  56.   }
  57. }
复制代码







欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5