HarmonyOS NEXT实战：网格元素拖拽交换

Question

##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##

目标：拖拽网格元素时，实现网格元素的交换

知识点：
Grid网格元素拖拽交换功能在应用中经常会被使用，如当编辑九宫格图片需要拖拽图片改变排序时，就会使用到该功能。当网格中图片进行拖拽交换时，元素排列会跟随图片拖拽的位置而发生变化，并且会有对应的动画效果，以达到良好的用户体验。

Grid网格布局一般由Grid容器组件和子组件GridItem构建生成，Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。网格布局中含有网格元素，当给Grid容器组件设置editMode属性为true时，可开启Grid组件的编辑模式。开启编辑模式后，还需要给GridItem组件绑定长按、拖拽等手势。最后，需要添加显式动画，并设置相应的动画效果。最终，呈现出网格元素拖拽交换的动效过程。

Grid网格元素拖拽交换功能实现是通过Grid容器组件、组合手势、显式动画结合来实现的。

Grid组件可以构建网格元素布局。
组合手势可以实现元素拖拽交换的效果。
显式动画可以给元素拖拽交换的过程中，添加动画效果。

注意
Grid组件当前支持GridItem拖拽动画，通过给Grid容器组件设置supportAnimation为true，即可开启动画效果。但仅支持在滚动模式下（设置rowsTemplate、columnsTemplate其中一个）支持动画。且仅在大小规则的Grid中支持拖拽动画，跨行或跨列场景不支持。因此，在跨行或跨列场景下，需要通过自定义Gird布局、自定义手势和显式动画来实现拖拽交换的效果。

在需要拖拽交换的场景中，开发流程：

实现Grid布局，启动editMode编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem。
给网络元素GridItem绑定相关手势，实现可拖拽操作。
使用显式动画animateTo，实现GridItem拖拽过程中的动画效果。

实战：GridItemDragExchangeDemoPage

@Entry
@Component
struct GridItemDragExchangeDemoPage {
  numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State imageNum: number = 1

  build() {
    Column() {
      Text('网格元素拖拽交换Demo')

      Grid() {
        ForEach(this.numbers, (item: number) => {
          GridItem() {
            Row() {
              Text(item.toString())
            }
            .width(116)
            .aspectRatio(1)
            .draggable(false)
            .animation({ curve: Curve.Sharp, duration: 300 })
            .backgroundColor(Color.Gray)
            .justifyContent(FlexAlign.Center)
          }
        }, (item: number) => item.toString())
      }
      .width('100%')
      .scrollBar(BarState.Off)
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)
      .editMode(true)
      .supportAnimation(true)
      .onItemDragStart((_, itemIndex: number) => {
        this.imageNum = this.numbers[itemIndex];
        return this.pixelMapBuilder();
      })
      .onItemDrop((_, itemIndex: number, insertIndex: number,
        isSuccess: boolean) => {
        if (!isSuccess || insertIndex >= this.numbers.length) {
          return;
        }
        this.changeIndex(itemIndex, insertIndex);
      })
    }
    .height('100%')
    .width('100%')
  }

  changeIndex(index1: number, index2: number): void {
    let tmp = this.numbers.splice(index1, 1);
    this.numbers.splice(index2, 0, tmp[0]);
  }

  @Builder
  pixelMapBuilder() {
    Column() {
      Row() {
        Text(this.imageNum.toString())
      }
      .width(116)
      .aspectRatio(1)
      .draggable(false)
      .animation({ curve: Curve.Sharp, duration: 300 })
      .backgroundColor(Color.Gray)
      .justifyContent(FlexAlign.Center)
    }
    .zIndex(1)
    .scale({ x: 1.05, y: 1.05 })
    .translate({ x: 0, y: 0 })
  }
}