HarmonyOS gridcell问题

@Observed  
class showData {  
  text: string  
  imgUrl: Resource  
  constructor(text: string, imgUrl: Resource) {  
    this.text = text  
    this.imgUrl = imgUrl  
  }  
}  
@Observed  
class showDataArray extends Array<showData> {  
}  
@Component  
struct itemC {  
  @ObjectLink showItem: showData  
  build() {  
    Column() {  
      Image(this.showItem.imgUrl)  
        .width(50)  
        .draggable(false)  
      Text(this.showItem.text)  
        .fontSize(16)  
        .textAlign(TextAlign.Center)  
    }  
    .width('100%')  
    .height(100)  
    .backgroundColor(Color.White)  
    .justifyContent(FlexAlign.Center)  
  }  
}  
@Entry  
@Component  
struct page240520190227060 {  
  @State numbers: showDataArray = []  
  scroller: Scroller = new Scroller()  
  @State text: string = 'drag'  
  gridH: number = 0  
  @State draggableItemW: number = 0  
  @Builder  
  pixelMapBuilder(text: string, imgUrl: Resource) { //拖拽过程样式  
    Column() {  
      Image(imgUrl)  
        .width(50)  
      Text(text)  
        .fontSize(16)  
        .textAlign(TextAlign.Center)  
    }  
    .width(this.draggableItemW)  
    .height(100)  
    .backgroundColor(Color.White)  
    .justifyContent(FlexAlign.Center)  
  }  
  aboutToAppear() {  
    for (let i = 1; i <= 15; i++) {  
      this.numbers.push(new showData(i.toString(), $r('app.media.background')))  
    }  
    this.setGridHeight()  
  }  
  setGridHeight() {  
    const temp = this.numbers.length % 4  
    if (temp) {  
      this.gridH = 40 + 100 * (Math.floor(temp) + 1)  
    } else {  
      this.gridH = 40 + 100 * temp  
    }  
  }  
  changeIndex(index1: number, index2: number) { //排序  
    if (index1 === index2) {  
      return  
    }  
    let tmp = this.numbers.splice(index1, 1)  
    this.numbers.splice(index2, 0, tmp[0])  
  }  
  build() {  
    Column() {  
      Column() {  
        Text('常用')  
          .width('100%')  
          .height(40)  
          .padding({ left: 20 })  
          .backgroundColor(Color.White)  
          Grid(this.scroller) {  
          ForEach(this.numbers, (item: showData) => {  
            GridItem() {  
              itemC({ showItem: item })  
            }  
            .width('25%')  
          }, (item: showData) => JSON.stringify(item))  
        }  
        .columnsTemplate('1fr 1fr 1fr 1fr')  
        .width('100%')  
        .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem  
        .supportAnimation(true)  
        .onAreaChange((oldValue: Area, newValue: Area) => {  
          this.draggableItemW = newValue.width as number / 4  
        })  
        .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。  
          const tempObj = this.numbers[itemIndex]  
          return this.pixelMapBuilder(tempObj.text, tempObj.imgUrl) //设置拖拽过程中显示的图片。  
        })  
        .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)  
        })  
      }  
      .width('90%')  
      .height(this.gridH)  
      .borderRadius(10)  
      .backgroundColor('#F2F2F4')  
      .clip(true)  
    }  
    .width('100%')  
    .margin({ top: 5 })  
    .backgroundColor('#F2F2F4')  
  }  
}