@Extend(ListItem) function gutter () {
  .padding(8)
}

@Extend(ListItem) function bug () {
  .borderColor(Color.Red)
  .borderWidth(2)
  .borderStyle(BorderStyle.Dashed)
}

@Extend(ListItem) function right () {
  .borderColor(Color.Green)
  .borderWidth(2)
  .borderStyle(BorderStyle.Dashed)
}

@Entry
@Component
export default struct RowBlank {
  build() {
    List({ space: 8 }) {
      ListItem() {
        Text("Image控件objectFit属性BUG")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
          .padding(8)
          .width('100%')
      }
      .sticky(Sticky.Normal)

      ListItem() {
        Grid() {
          ForEach(Array(12).fill($r("app.media.icon")), (item: Resource) => {
            GridItem() {
              Image(item)
                .backgroundColor(0x00ff00)
                .objectFit(ImageFit.Contain)
            }
            .padding(1)
            .backgroundColor(0xff0000)
          }, (item: Resource) => item.id + "")
        }
        .columnsGap(8)
        .columnsTemplate(Array(6).fill("1fr").join(" "))
        .rowsGap(8)
        .rowsTemplate(Array(2).fill("1fr").join(" "))
      }
      .bug()
      .gutter()
      .width('100%')

      ListItem() {
        Grid() {
          ForEach(Array(12).fill($r("app.media.icon")), (item: Resource) => {
            GridItem() {
              Image(item)
                .aspectRatio(1)
                .backgroundColor(0x00ff00)
                .objectFit(ImageFit.Contain)
            }
            .padding(1)
            .backgroundColor(0xff0000)
          }, (item: Resource) => item.id + "")
        }
        .columnsGap(8)
        .columnsTemplate(Array(6).fill("1fr").join(" "))
        .rowsGap(8)
        .rowsTemplate(Array(2).fill("1fr").join(" "))
      }
      .bug()
      .gutter()
      .width('100%')
    }
    .backgroundColor(0xeeeeee)
    .height('100%')
    .align(Alignment.Top)
  }
}