GridItem

網(wǎng)格容器中單項(xiàng)內(nèi)容容器。

說(shuō)明：
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

• 該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
• 僅支持作為[Grid]組件的子組件使用。

子組件

可以包含子組件。

接口

GridItem11+

GridItem(value?: GridItemOptions)

參數(shù)：

屬性

說(shuō)明：

起始行號(hào)、終點(diǎn)行號(hào)、起始列號(hào)、終點(diǎn)列號(hào)生效規(guī)則如下：

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

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

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

在設(shè)置columnTemplate和rowTemplate的Grid中，單獨(dú)設(shè)置行號(hào)rowStart/rowEnd或列號(hào)columnStart/columnEnd的GridItem會(huì)按照一行一列進(jìn)行布局。

在只設(shè)置columnTemplate的Grid中設(shè)置列號(hào)columnStart/columnEnd的GridItem按照列數(shù)布局。在該區(qū)域位置存在GridItem布局，則直接換行進(jìn)行放置。

在只設(shè)置rowTemplate的Grid中設(shè)置行號(hào)rowStart/rowEnd的GridItem按照行數(shù)布局。在該區(qū)域位置存在GridItem布局，則直接換列進(jìn)行放置。

在只設(shè)置columnTemplate的Grid中，在GridItem上設(shè)置了不合理的值，GridItem按照一行一列進(jìn)行布局。

columnTemplate和rowTemplate都不設(shè)置的Grid中GridItem的行列號(hào)屬性無(wú)效。

GridItemOptions11+對(duì)象說(shuō)明

GridItemStyle11+枚舉說(shuō)明

說(shuō)明：

GridItem焦點(diǎn)態(tài)樣式設(shè)置：Grid組件需要設(shè)置4vp規(guī)格以上的內(nèi)邊距，用于顯示GridItem的焦點(diǎn)框。

事件

示例

示例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) // 同時(shí)設(shè)置合理的行列號(hào)

        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) // 只設(shè)置列號(hào)，不會(huì)從第1列開(kāi)始布局
      }
      .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 })
  }
}

審核編輯 黃宇