拖拽事件extraParams返回空

按要求拖拽事件放在ListItem组件上执行。

@Entry  
@Component  
struct Test {  
  @State message: string = 'Hello World'  
  @State arr1: string[] = []  
  aboutToAppear(): void {  
    for (let i = 0; i < 50; i++) {  
      this.arr1.push(i + "")  
    }  
  }  
  private scrollerForScroll: Scroller = new Scroller()  
  swapElementsAtIndex(index1: number, index2: number): void {  
    if (index1 < 0 || index1 >= this.arr1.length || index2 < 0 || index2 >= this.arr1.length) {  
      return  
    }  
    const temp = this.arr1[index1];  
    this.arr1[index1] = this.arr1[index2];  
    this.arr1[index2] = temp;  
  }  
  build() {  
    Column() {  
      Text('标题').margin({ top: 50 }).height(20)  
      Scroll(this.scrollerForScroll) {  
        List({ initialIndex: 0 }) {  
          ForEach(this.arr1, (item: string, index: number) => {  
            ListItem() {  
              Column() {  
                Text('' + item)  
                  .width('100%')  
                  .height(40)  
                  .fontSize(16)  
                  .textAlign(TextAlign.Center)  
                  .borderRadius(10)  
                  .backgroundColor(0xFFFFFF)  
              }.borderColor(Color.Red).borderWidth(1)  
            }  
            .draggable(true)  
            .onDragEnd((event?: DragEvent,extraParams?: string) => {  
              if (event &&  extraParams) {  
                const extraObj =  JSON.parse(extraParams) as Record<string, number>  
                let selectedIndex = extraObj['selectedIndex']  
                let insertIndex = extraObj['insertIndex']  
                this.swapElementsAtIndex(selectedIndex,insertIndex)  
              }  
            })  
          }, (item: string) => item)  
        }  
      }  
    }  
  }  
}
HarmonyOS
2024-09-23 14:10:03
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以直接使用List组件自带的拖拽事件onItemDragStart、onItemDrop

参考demo:

@Entry  
@Component  
struct DragPage {  
  @State arr1: string[] = []  
  a: string[] = ['a', 'b', 'c']  
  @State text: string = 'drag';  
  aboutToAppear(): void {  
    for (let i = 0; i < 5; i++) {  
      this.arr1.push(i + "" + this.a[i % 3])  
    }  
  }  
  private scrollerForScroll: Scroller = new Scroller()  
  swapElementsAtIndex(index1: number, index2: number): void {  
    if (index1 < 0 || index1 >= this.arr1.length || index2 < 0 || index2 >= this.arr1.length) {  
      return  
    }  
    const temp = this.arr1[index1];  
    this.arr1[index1] = this.arr1[index2];  
    this.arr1[index2] = temp;  
  }  
  
  @Styles fancy() {  
    .width('100%')  
    .height(40)  
    .borderRadius(10)  
    .backgroundColor(0xFFFFFF)  
  }  
  
  @Builder pixelMapBuilder() { //拖拽过程样式  
    Column() {  
      Text(this.text).fancy().fontSize(16).textAlign(TextAlign.Center)  
    }.borderColor(Color.Red).borderWidth(1)  
  }  
  
  build() {  
    Flex({direction: FlexDirection.Column, justifyContent:FlexAlign.Start}) {  
      Text('标题').margin({ top: 50 }).height(20)  
      Scroll(this.scrollerForScroll) {  
        List({ initialIndex: 0 }) {  
          ForEach(this.arr1, (item: string, index: number) => {  
            ListItem() {  
              Column() {  
                Text('' + item)  
                  .fontSize(16)  
                  .textAlign(TextAlign.Center)  
                  .fancy()  
              }.borderColor(Color.Red).borderWidth(1)  
            }  
            .onTouch(() => {this.text = item})  
          }, (item: string) => item)  
        }  
        .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {  
          return this.pixelMapBuilder();  
        })  
        .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {  
          this.swapElementsAtIndex(itemIndex, insertIndex)  
        })  
      }  
    }  
    .width('100%')  
    .height('100%')  
  }  
}

也可以使用手势事件实现拖拽效果。

参考demo:

import curves from '@ohos.curves';  
import Curves from '@ohos.curves'  
@Entry  
@Component  
struct ListItemExample {  
  @State private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]  
  @State dragItem: number = -1  
  @State scaleItem: number = -1  
  @State neighborItem: number = -1  
  @State neighborScale: number = -1  
  private dragRefOffset: number = 0  
  @State offsetX: number = 0  
  @State offsetY: number = 0  
  private ITEM_INTV: number = 120  
  scaleSelect(item: number): number {  
    if (this.scaleItem == item) {  
      return 1.05  
    } else if (this.neighborItem == item) {  
      return this.neighborScale  
    } else {  
      return 1  
    }  
  }  
  itemMove(index: number, newIndex: number): void {  
    let tmp = this.arr.splice(index, 1)  
    this.arr.splice(newIndex, 0, tmp[0])  
  }  
  build() {  
    Stack() {  
      List({ space: 20, initialIndex: 0 }) {  
        ForEach(this.arr, (item: number) => {  
          ListItem() {  
            Text('' + item)  
              .width('100%')  
              .height(100)  
              .fontSize(16)  
              .textAlign(TextAlign.Center)  
              .borderRadius(10)  
              .backgroundColor(0xFFFFFF)  
              .shadow(this.scaleItem == item ? { radius: 70, color: '#15000000', offsetX: 0, offsetY: 0 } :  
                { radius: 0, color: '#15000000', offsetX: 0, offsetY: 0 })  
              .animation({ curve: Curve.Sharp, duration: 300 })  
          }  
          .margin({ left: 12, right: 12 })  
          .scale({ x: this.scaleSelect(item), y: this.scaleSelect(item) })  
          .zIndex(this.dragItem == item ? 1 : 0)  
          .translate(this.dragItem == item ? { y: this.offsetY } : { y: 0 })  
          .gesture(  
          // 以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件  
            GestureGroup(GestureMode.Sequence,  
              LongPressGesture({ repeat: true })  
                .onAction((event?: GestureEvent) => {  
                  animateTo({ curve: Curve.Friction, duration: 300 }, () => {  
                    this.scaleItem = item  
                  })  
                    .onActionEnd(() => {  
                      animateTo({ curve: Curve.Friction, duration: 300 }, () => {  
                        this.scaleItem = -1  
                      })  
                    }),  
                  PanGesture({ fingers: 1, direction: null, distance: 0 })  
                    .onActionStart(() => {  
                      this.dragItem = item  
                      this.dragRefOffset = 0  
                    })  
                    .onActionUpdate((event: GestureEvent) => {  
                      this.offsetY = event.offsetY - this.dragRefOffset  
                      // console.log('Y:' + this.offsetY.toString())  
                      this.neighborItem = -1  
                      let index = this.arr.indexOf(item)  
                      let curveValue = Curves.initCurve(Curve.Sharp)  
                      let value: number = 0  
                      //根据位移计算相邻项的缩放  
                      if (this.offsetY < 0) {  
                        value = curveValue.interpolate(-this.offsetY / this.ITEM_INTV)  
                        this.neighborItem = this.arr[index-1]  
                        this.neighborScale = 1 - value / 20;  
                        console.log('neighborScale:' + this.neighborScale.toString())  
                      } else if (this.offsetY > 0) {  
                        value = curveValue.interpolate(this.offsetY / this.ITEM_INTV)  
                        this.neighborItem = this.arr[index+1]  
                        this.neighborScale = 1 - value / 20;  
                      }  
                      //根据位移交换排序  
                      if (this.offsetY > this.ITEM_INTV / 2) {  
                        animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {  
                          this.offsetY -= this.ITEM_INTV  
                          this.dragRefOffset += this.ITEM_INTV  
                          this.itemMove(index, index + 1)  
                        })  
                      } else if (this.offsetY < -this.ITEM_INTV / 2) {  
                        animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {  
                          this.offsetY += this.ITEM_INTV  
                          this.dragRefOffset -= this.ITEM_INTV  
                          this.itemMove(index, index - 1)  
                        })  
                      }  
                    })  
                    .onActionEnd((event: GestureEvent) => {  
                      animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {  
                        this.dragItem = -1  
                        this.neighborItem = -1  
                      })  
                      animateTo({  
                        curve: curves.interpolatingSpring(14, 1, 170, 17), delay: 150  
                      }, () => {  
                        this.scaleItem = -1  
                      })  
                    })  
                  )  
                  .onCancel(() => {  
                    animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {  
                      this.dragItem = -1  
                      this.neighborItem = -1  
                    })  
                    animateTo({  
                      curve: curves.interpolatingSpring(14, 1, 170, 17), delay: 150  
                    }, () => {  
                      this.scaleItem = -1  
                    })  
                  })  
                  )  
                }, (item: number) => item.toString())  
        }  
      }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })  
    }  
  }
分享
微博
QQ
微信
回复
2024-09-23 17:45:19
相关问题
HarmonyOS resourceDir返回空
144浏览 • 1回复 待解决
HarmonyOS RN如何拦截返回事件
184浏览 • 1回复 待解决
HarmonyOS 页面返回事件如何监听
206浏览 • 1回复 待解决
HarmonyOS page中如何获取返回事件
535浏览 • 1回复 待解决
HarmonyOS 子窗口页面返回事件无效
172浏览 • 1回复 待解决
返回按钮是否可以自定义事件
428浏览 • 1回复 待解决
拖拽时怎么设置当前拖拽项目数
1192浏览 • 1回复 待解决
HarmonyOS 侧滑返回事件拦截与绑定
1535浏览 • 1回复 待解决
华为事件通知接口返回10008错误码
9562浏览 • 2回复 待解决