HarmonyOS鸿蒙Next中Grid组件拖拽排序，拖拽到底部时滚动组件，发现组件位置错乱

HarmonyOS鸿蒙Next中Grid组件拖拽排序，拖拽到底部时滚动组件，发现组件位置错乱

import Curves from ‘@ohos.curves’

@Component struct GridExample {

@State numbers: string[] = []

scroller: Scroller = new Scroller()

@State text: string = ‘drag’

@State currentIndex: number = 0

@State startIndex: number = 0

@State endIndex: number = 0

@Builder pixelMapBuilder() { //拖拽过程样式

Column() {

  Text(this.text)

    .fontSize(16)

    .backgroundColor(0xF9CF93)

    .width(80)

    .height(80)

    .textAlign(TextAlign.Center)

}

}

aboutToAppear() {

for (let i = 1;i <= 150; i++) {

  this.numbers.push(i + '')

}

}

changeIndex(index1: number, index2: number) { //交换数组位置

let temp: string;

temp = this.numbers[index1];

this.numbers[index1] = this.numbers[index2];

this.numbers[index2] = temp;

}

build() {

Column({ space: 5 }) {

  Grid(this.scroller) {

    ForEach(this.numbers, (day: string) {

      GridItem() {

        Text(day)

          .fontSize(16)

          .backgroundColor(0xF9CF93)

          .width(80)

          .height(80)

          .textAlign(TextAlign.Center)

      }

    })

  }

  .columnsTemplate('1fr 1fr 1fr')

  .columnsGap(10)

  .rowsGap(10)

  .width('90%')

  .backgroundColor(0xFAEEE0)

  .height(300)
  .supportAnimation(true) // 启用动画

  .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem

  .onScrollIndex((start: number, end: number) => {

    this.startIndex = start

    this.endIndex = end

  })

  .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。

    this.text = this.numbers[itemIndex]

    this.currentIndex = itemIndex

    return this.pixelMapBuilder() //设置拖拽过程中显示的图片。

  })

  .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。

    // isSuccess=false时，说明drop的位置在grid外部；insertIndex > length时，说明有新增元素的事件发生

    if (!isSuccess || insertIndex >= this.numbers.length) {

      return

    }

    console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置

    this.changeIndex(itemIndex, insertIndex)

  })

  .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
    if (insertIndex > itemIndex) {
      const currentOffsetY = this.scroller.currentOffset().yOffset
      this.scroller.scrollTo({
        xOffset: 0,
        yOffset: currentOffsetY + 10,
      })
    }

  })

}.width('100%').margin({ top: 5 })

}

}


更多关于HarmonyOS鸿蒙Next中Grid组件拖拽排序，拖拽到底部时滚动组件，发现组件位置错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，Grid组件拖拽排序时，拖拽到底部触发滚动后出现组件位置错乱的问题，可能是由于滚动过程中Grid组件的布局未及时更新或状态未正确同步。可以检查onScroll事件的处理逻辑，确保在滚动时正确更新组件位置。同时，确认拖拽事件的回调是否在滚动后重新计算了组件的位置信息，避免布局错乱。

更多关于HarmonyOS鸿蒙Next中Grid组件拖拽排序，拖拽到底部时滚动组件，发现组件位置错乱的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于在拖拽过程中滚动容器时，Grid组件的索引计算出现了偏差。建议检查以下几点：

  1. 在onItemDragMove回调中，直接修改scrollOffset可能导致Grid内部状态不同步。可以尝试使用更平滑的滚动方式：
.onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
    if (insertIndex > itemIndex) {
        this.scroller.scrollBy({
            yOffset: 10,
            duration: 100  // 添加滚动动画
        });
    }
}
  1. 确保在onItemDrop回调中正确处理了边界情况：
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
    if (!isSuccess || insertIndex >= this.numbers.length || insertIndex < 0) {
        return;
    }
    // 交换逻辑
}
  1. 考虑在拖拽过程中临时禁用滚动，拖拽结束后再恢复：
@State isDragging: boolean = false;

// 在onItemDragStart中设置
.onItemDragStart(() => {
    this.isDragging = true;
    // ...
})

// 在onItemDrop中恢复
.onItemDrop(() => {
    this.isDragging = false;
    // ...
})

问题可能源于滚动和拖拽动画的冲突，建议先简化滚动逻辑进行测试。

回到顶部