1# GridItem 2 3网格容器中单项内容容器。 4 5> **说明：** 6> 7> * 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> * 仅支持作为[Grid](ts-container-grid.md)组件的子组件使用。 9 10 11## 子组件 12 13可以包含单个子组件。 14 15 16## 接口 17 18GridItem() 19 20 21## 属性 22 23| 名称 | 参数类型 | 描述 | 24| -------- | -------- | -------- | 25| rowStart | number | 指定当前元素起始行号。 | 26| rowEnd | number | 指定当前元素终点行号。 | 27| columnStart | number | 指定当前元素起始列号。 | 28| columnEnd | number | 指定当前元素终点列号。 | 29| forceRebuild<sup>(deprecated)</sup> | boolean | 设置在触发组件build时是否重新创建此节点。<br/>从API version9开始废弃。GridItem会根据自身属性和子组件变化自行决定是否需要重新创建，无需设置。<br/>默认值：false | 30| selectable<sup>8+</sup> | boolean | 当前GridItem元素是否可以被鼠标框选。<br/>> **说明：**<br/>> 外层Grid容器的鼠标框选开启时，GridItem的框选才生效。<br/>默认值：true | 31| selected<sup>10+</sup> | boolean | 设置当前GridItem选中状态。该属性支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量。<br/>**说明：**<br/>该属性需要在设置[选中态样式](./ts-universal-attributes-polymorphic-style.md#statestyles接口说明)前使用才能生效选中态样式。<br/>默认值：false| 32 33> **说明：** 34> 35> 起始行号、终点行号、起始列号、终点列号生效规则如下： 36> 37> rowStart/rowEnd合理取值范围为0\~总行数-1，columnStart/columnEnd合理取值范围为0\~总列数-1。 38> 39> 如果设置了rowStart/rowEnd/columnStart/columnEnd，GridItem会占据指定的行数(rowEnd-rowStart+1)或列数(columnEnd-columnStart+1)。 40> 41> 只有在设置columnTemplate和rowTemplate的Grid中，设置合理的rowStart/rowEnd/columnStart/columnEnd四个属性的GridItem才能按照指定的行列号布局。 42> 43> 在设置columnTemplate和rowTemplate的Grid中，单独设置行号rowStart/rowEnd或列号columnStart/columnEnd的GridItem会按照一行一列进行布局。 44> 45> 在只设置columnTemplate的Grid中设置列号columnStart/columnEnd的GridItem按照列数布局。在该区域位置存在GridItem布局，则直接换行进行放置。 46> 47> 在只设置rowTemplate的Grid中设置行号rowStart/rowEnd的GridItem按照行数布局。在该区域位置存在GridItem布局，则直接换列进行放置。 48> 49> 在只设置columnTemplate的Grid中，在GridItem上设置了不合理的值，GridItem按照一行一列进行布局。 50> 51> columnTemplate和rowTemplate都不设置的Grid中GridItem的行列号属性无效。 52 53 54## 事件 55 56| 名称 | 功能描述 | 57| -------- | -------- | 58| onSelect(event: (isSelected: boolean) => void)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | 59 60 61## 示例 62 63```ts 64// xxx.ets 65@Entry 66@Component 67struct GridItemExample { 68 @State numbers: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"] 69 70 build() { 71 Column() { 72 Grid() { 73 GridItem() { 74 Text('4') 75 .fontSize(16) 76 .backgroundColor(0xFAEEE0) 77 .width('100%') 78 .height('100%') 79 .textAlign(TextAlign.Center) 80 }.rowStart(1).rowEnd(2).columnStart(1).columnEnd(2) // 同时设置合理的行列号 81 82 ForEach(this.numbers, (item: string) => { 83 GridItem() { 84 Text(item) 85 .fontSize(16) 86 .backgroundColor(0xF9CF93) 87 .width('100%') 88 .height('100%') 89 .textAlign(TextAlign.Center) 90 } 91 }, (item: string) => item) 92 93 GridItem() { 94 Text('5') 95 .fontSize(16) 96 .backgroundColor(0xDBD0C0) 97 .width('100%') 98 .height('100%') 99 .textAlign(TextAlign.Center) 100 }.columnStart(1).columnEnd(4) // 只设置列号，不会从第1列开始布局 101 } 102 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 103 .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 104 .width('90%').height(300) 105 }.width('100%').margin({ top: 5 }) 106 } 107} 108``` 109 110 111
