快速上手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; // 过滤选择媒体文件类型为IMAGEphotoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目let URI = null;const photoViewPicker = new picker.PhotoViewPicker();photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => {URI = photoSelectResult.photoUristhis.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)}
}`在这里插入代码片`