GridItem

網格容器中單項內容容器。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

• 該組件從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。
• 僅支持作為[Grid]組件的子組件使用。

子組件

可以包含子組件。

接口

GridItem11+

GridItem(value?: GridItemOptions)

參數：

屬性

說明：

起始行號、終點行號、起始列號、終點列號生效規則如下：

rowStart/rowEnd合理取值范圍為0總行數-1，columnStart/columnEnd合理取值范圍為0總列數-1。

如果設置了rowStart/rowEnd/columnStart/columnEnd，GridItem會占據指定的行數(rowEnd-rowStart+1)或列數(columnEnd-columnStart+1)。

只有在設置columnTemplate和rowTemplate的Grid中，設置合理的rowStart/rowEnd/columnStart/columnEnd四個屬性的GridItem才能按照指定的行列號布局。

在設置columnTemplate和rowTemplate的Grid中，單獨設置行號rowStart/rowEnd或列號columnStart/columnEnd的GridItem會按照一行一列進行布局。

在只設置columnTemplate的Grid中設置列號columnStart/columnEnd的GridItem按照列數布局。在該區域位置存在GridItem布局，則直接換行進行放置。

在只設置rowTemplate的Grid中設置行號rowStart/rowEnd的GridItem按照行數布局。在該區域位置存在GridItem布局，則直接換列進行放置。

在只設置columnTemplate的Grid中，在GridItem上設置了不合理的值，GridItem按照一行一列進行布局。

columnTemplate和rowTemplate都不設置的Grid中GridItem的行列號屬性無效。

GridItemOptions11+對象說明

GridItemStyle11+枚舉說明

說明：

GridItem焦點態樣式設置：Grid組件需要設置4vp規格以上的內邊距，用于顯示GridItem的焦點框。

事件

示例

示例1

// xxx.ets
@Entry
@Component
struct GridItemExample {
  @State numbers: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]

  build() {
    Column() {
      Grid() {
        GridItem() {
          Text('4')
            .fontSize(16)
            .backgroundColor(0xFAEEE0)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }.rowStart(1).rowEnd(2).columnStart(1).columnEnd(2) // 同時設置合理的行列號

        ForEach(this.numbers, (item: string) = > {
          GridItem() {
            Text(item)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
        }, (item: string) = > item)

        GridItem() {
          Text('5')
            .fontSize(16)
            .backgroundColor(0xDBD0C0)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }.columnStart(1).columnEnd(4) // 只設置列號，不會從第1列開始布局
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .width('90%').height(300)
    }.width('100%').margin({ top: 5 })
  }
}

示例2

使用GridItemOptions

// xxx.ets
@Entry
@Component
struct GridItemExample {
  @State Number: String[] = ['0', '1', '2']

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.Number, (day: string) = > {
          ForEach(this.Number, (day: string) = > {
            GridItem() {
              Text(day)
                .fontSize(16)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
                .focusable(true)
            }
            .backgroundColor(0xF9CF93)
          }, (day: string) = > day)
        }, (day: string) = > day)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)
      .width('60%')
      .backgroundColor(0xFAEEE0)
      .height(150)
      .padding('4vp')

      Grid() {
        ForEach(this.Number, (day: string) = > {
          ForEach(this.Number, (day: string) = > {
            GridItem() {
              Text(day)
                .fontSize(16)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
                .focusable(true)
            }
            .backgroundColor(0xF9CF93)
          }, (day: string) = > day)
        }, (day: string) = > day)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)
      .width('60%')
      .backgroundColor(0xFAEEE0)
      .height(150)
      .padding('4vp')
    }.width('100%').margin({ top: 5 })
  }
}

審核編輯 黃宇