快速上手Grid拖拽交换子组件位置

/**
 * 构建图库UI主页面
 */
// 导入模块
import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';

@Entry
@Component
struct Page {
  @State title: string = '图库';
  @State pictureArray: Resource[] = [$r('app.media.pic_1'), $r("app.media.pic_2"), $r('app.media.pic_3')
  ];
  @State addPic: Resource = $r('app.media.addPic');
  private picTemp: Resource;
  @State pictureZIndex: number = 0;
  @State isSelect: boolean = false;
  private selectedPicture: number[] = [];
  /**
   * 图片添加方法：
   * 从手机相册添加图片
   */
  addPicture = async () => {
    const photoSelectOptions = new picker.PhotoSelectOptions();
    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
    photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目
    let URI = null;
    const photoViewPicker = new picker.PhotoViewPicker();
    photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => {
      URI = photoSelectResult.photoUris
      this.pictureArray = this.pictureArray.concat(URI)

      let file = fs.openSync(URI, fs.OpenMode.READ_ONLY);
      console.info('===file fd: ' + file.fd);
      let buffer = new ArrayBuffer(4096);
      let readLen = fs.readSync(file.fd, buffer);
      console.info('===readSync data to file succeed and buffer size is:' + readLen);
      fs.closeSync(file);
    }).catch((err) => {
      console.error(`===Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
    })
  }

  //拖拽过程中展示的样式
  @Builder pixelMapBuilder() {
    Image(this.picTemp)
      .height(66)
      .objectFit(ImageFit.Contain)
  }

  //交换数组中元素位置
  changeIndex(index1: number, index2: number) {
    let temp = this.pictureArray[index1]
    this.pictureArray[index1] = this.pictureArray[index2]
    this.pictureArray[index2] = temp
  }

  build() {
    Column() {
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .width('100%')
        .textAlign(TextAlign.Center)
        .padding(6)
        .backgroundColor("#aee4d8")

      Divider()
        .strokeWidth(5)
        .shadow({ radius: 3, color: "#F5F5F5", offsetX: 5, offsetY: 10 })
      // 图片展示的UI布局
      Column() {
        // 网格组件展示图片
        Grid() {
          // ForEach 循环渲染 UI 布局展示APP中内置的图片
          ForEach(this.pictureArray.slice(0, this.pictureArray.length - 1), (item, index) => {
            GridItem() {
              Image(item)
                .width('100%')
                .objectFit(ImageFit.Contain)
                .onTouch((event: TouchEvent) => {
                  if (event.type === TouchType.Down) {
                    this.picTemp = item
                  }
                })
            }
          })

          GridItem() {
            Image(this.addPic)
              .width('100%')
              .objectFit(ImageFit.Fill)
          }
          .onClick(this.addPicture)
        }
        //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
        .editMode(true)
        .columnsTemplate('1fr 1fr 1fr')
        .rowsGap(3)
        .columnsGap(3)
        .onScrollIndex((first: number) => {
          console.info("====" + first.toString())
        })
        //第一次拖拽此事件绑定的组件时，触发回调
        .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
          //设置拖拽过程中显示的图片
          return this.pixelMapBuilder()
        })
        //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调
        //itemIndex为拖拽起始位置，insertIndex为拖拽插入位置
        .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
          //不支持拖拽到已有内容以外的位置
          if (insertIndex < this.pictureArray.length - 1) {
            this.changeIndex(itemIndex, insertIndex)
          }
        })
      }
      .height("80%")
      .width('100%')
    }
    .height("100%")
    .justifyContent(FlexAlign.Start)
  }
}`在这里插入代码片`