HarmonyOS鸿蒙Next中悬赏30积分麻烦帮写一个像这样的图片渲染列表样式

// ImageItem.ets
export default class ImageItem {
  fiename: string
  Path: string
  Pathurl: string
  duration: number
  size: string
  byteSize: number
  width: number
  height: number
  title: string
  mimeType: string
  dateAddedTime: number

  constructor(fiename: string, Path: string, Pathurl: string, duration: number,
    size: string, byteSize: number, width: number, height: number,
    title: string, mimeType: string, dateAddedTime: number) {
    this.fiename = fiename
    this.Path = Path
    this.Pathurl = Pathurl
    this.duration = duration
    this.size = size
    this.byteSize = byteSize
    this.width = width
    this.height = height
    this.title = title
    this.mimeType = mimeType
    this.dateAddedTime = dateAddedTime
  }
}

// ImageGridPage.ets
import ImageItem from './ImageItem'

@Entry
@Component
struct ImageGridPage {
  // 模拟你的JSON数据
  @State images: ImageItem[] = [
    new ImageItem(
      "IMG_091.jpeg",
      "file://media/Photo/10",
      "/data/storage/el2/base/haps/entry/temp/IMG_091.jpeg",
      0, "554.63KB", 567937, 2519, 2519, "IMG_091", "image", 1758602451568
    ),
    new ImageItem(
      "IMG_092.jpeg",
      "file://media/Photo/11",
      "/data/storage/el2/base/haps/entry/temp/IMG_092.jpeg",
      0, "554.63KB", 567937, 2519, 2519, "IMG_092", "image", 1758602451568
    ),
    new ImageItem(
      "IMG_093.jpeg",
      "file://media/Photo/10",
      "/data/storage/el2/base/haps/entry/temp/IMG_093.jpeg",
      0, "554.63KB", 567937, 2519, 2519, "IMG_093", "image", 1758602451568
    )
  ]

  // 添加图片
  addImage() {
    const newIndex = this.images.length + 91
    const newImage = new ImageItem(
      `IMG_${newIndex}.jpeg`,
      `file://media/Photo/${newIndex - 90}`,
      `/data/storage/el2/base/haps/entry/temp/IMG_${newIndex}.jpeg`,
      0, "554.63KB", 567937, 2519, 2519, `IMG_${newIndex}`, "image", Date.now()
    )
    this.images.push(newImage)
  }

  // 删除图片
  deleteImage(index: number) {
    this.images.splice(index, 1)
  }

  // 移动图片（交换位置）
  moveImage(fromIndex: number, toIndex: number) {
    const item = this.images[fromIndex]
    this.images.splice(fromIndex, 1)
    this.images.splice(toIndex, 0, item)
  }

  build() {
    Column({ space: 10 }) {
      // 添加按钮
      Button("添加图片")
        .width('100%')
        .height(50)
        .backgroundColor('#007AFF')
        .onClick(() => this.addImage())

      // 九宫格
      Grid() {
        ForEach(this.images, (item: ImageItem, index: number) => {
          GridItem() {
            Stack() {
              Image(item.Pathurl)
                .objectFit(ImageFit.Cover)
                .width('100%')
                .height('100%')

              // 删除按钮
              Button("×")
                .width(30)
                .height(30)
                .backgroundColor('#FF3B30')
                .borderRadius(15)
                .position({ x: '85%', y: '15%' })
                .onClick(() => this.deleteImage(index))
            }
          }
          .onDragStart(() => {
            return JSON.stringify({ index })
          })
          .onDrop((event: DragEvent, extraParams: string) => {
            const from = JSON.parse(extraParams).index as number
            this.moveImage(from, index)
          })
        }, item => item.fiename)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsGap(10)
      .columnsGap(10)
      .padding(10)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}