1# GridItem 2 3网格容器中单项内容容器。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。 13 14 15## 接口 16 17GridItem() 18 19 20## 属性 21 22| 名称 | 参数类型 | 描述 | 23| -------- | -------- | -------- | 24| rowStart | number | 指定当前元素起始行号。 | 25| rowEnd | number | 指定当前元素终点行号。 | 26| columnStart | number | 指定当前元素起始列号。 | 27| columnEnd | number | 指定当前元素终点列号。 | 28| forceRebuild<sup>(deprecated)</sup> | boolean | 设置在触发组件build时是否重新创建此节点。<br/>从API version9开始废弃。GridItem会根据自身属性和子组件变化自行决定是否需要重新创建，无需设置。<br/>默认值：false | 29| selectable<sup>8+</sup> | boolean | 当前GridItem元素是否可以被鼠标框选。<br/>> **说明：**<br/>> 外层Grid容器的鼠标框选开启时，GridItem的框选才生效。<br/>默认值：true | 30 31 32## 事件 33 34| 名称 | 功能描述 | 35| -------- | -------- | 36| onSelect(event: (isSelected: boolean) => void)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | 37 38 39## 示例 40 41```ts 42// xxx.ets 43@Entry 44@Component 45struct GridItemExample { 46 @State numbers: string[] = Array.apply(null, { length: 16 }).map(function (item, i) { 47 return i.toString() 48 }) 49 50 build() { 51 Column() { 52 Grid() { 53 GridItem() { 54 Text('4') 55 .fontSize(16) 56 .backgroundColor(0xFAEEE0) 57 .width('100%') 58 .height('100%') 59 .textAlign(TextAlign.Center) 60 }.rowStart(1).rowEnd(4) 61 62 ForEach(this.numbers, (item) => { 63 GridItem() { 64 Text(item) 65 .fontSize(16) 66 .backgroundColor(0xF9CF93) 67 .width('100%') 68 .height('100%') 69 .textAlign(TextAlign.Center) 70 } 71 }, item => item) 72 73 GridItem() { 74 Text('5') 75 .fontSize(16) 76 .backgroundColor(0xDBD0C0) 77 .width('100%') 78 .height('100%') 79 .textAlign(TextAlign.Center) 80 }.columnStart(1).columnEnd(5) 81 } 82 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 83 .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 84 .width('90%').height(300) 85 }.width('100%').margin({ top: 5 }) 86 } 87} 88``` 89 90 91
