HarmonyOS 鸿蒙Next grid合并单元格后如何进行排序

参考如下Demo，输入一个对象数组，使用数组生成一个多行多列的列表布局，并且在item拖动后原始数组数据能够实时更新。

class ItemClass {
  id: number = 0
  lable: string = ''
constructor(id: number, lable: string) {
this.id = id
this.lable = lable
}
}
@Entry
@Component
struct GridExample {
@State items: ItemClass[]  = []
scroller: Scroller = new Scroller()
@State text: ItemClass = new ItemClass(0, ‘Item 0’)
@Builder pixelMapBuilder() { // 拖拽过程样式
Column() {
Text(this.text.lable)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width(80)
.height(80)
.textAlign(TextAlign.Center)
}
}
aboutToAppear() {
for (let i = 1; i <= 15; i++) {
this.items.push(new ItemClass(i, 'Item ’ + i.toString()))
}
}
changeIndex(index1: number, index2: number) { // 交换数组位置
let temp = this.items[index1]
this.items[index1] = this.items[index2]
this.items[index2] = temp
}
build() {
Column({ space: 5 }) {
Grid(this.scroller) {
ForEach(this.items, (day: ItemClass) => {
GridItem() {
Text(day.lable)
.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)
.editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。
this.text = this.items[itemIndex]
return this.pixelMapBuilder() //设置拖拽过程中显示的图片。
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
// isSuccess=false时，说明drop的位置在grid外部；insertIndex > length时，说明有新增元素的事件发生
if (!isSuccess || insertIndex >= this.items.length) {
return
}
console.info(‘beixiang’ + itemIndex + ‘’, insertIndex + ‘’) //itemIndex拖拽起始位置，insertIndex拖拽插入位置
this.changeIndex(itemIndex, insertIndex)
})
}.width(‘100%’).margin({ top: 5 })
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>