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 | boolean | 设置在触发组件build时是否重新创建此节点。<br/>默认值：false | 29| selectable<sup>8+</sup> | boolean | 当前GridItem元素是否可以被鼠标框选。<br/>默认值：true<br/>> **说明：**<br/>> 外层Grid容器的鼠标框选开启时，GridItem的框选才生效。 | 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, Array(16)).map(function (item, i) { return i.toString() }) 47 48 build() { 49 Column() { 50 Grid() { 51 GridItem() { 52 Text('4') 53 .fontSize(16).backgroundColor(0xFAEEE0) 54 .width('100%').height('100%').textAlign(TextAlign.Center) 55 }.rowStart(1).rowEnd(4) 56 57 ForEach(this.numbers, (item) => { 58 GridItem() { 59 Text(item) 60 .fontSize(16).backgroundColor(0xF9CF93) 61 .width('100%').height('100%').textAlign(TextAlign.Center) 62 }.forceRebuild(false) 63 }, item => item) 64 65 GridItem() { 66 Text('5') 67 .fontSize(16).backgroundColor(0xDBD0C0) 68 .width('100%').height('100%').textAlign(TextAlign.Center) 69 }.columnStart(1).columnEnd(5) 70 } 71 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 72 .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 73 .width('90%').height(300) 74 }.width('100%').margin({ top: 5 }) 75 } 76} 77``` 78 79 80
