1# Grid 2 3网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12包含[GridItem](ts-container-griditem.md)子组件。 13 14 15## 接口 16 17Grid(scroller?: Scroller) 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| --------- | ---------------------------------------- | ---- | ----------------------- | 23| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | 24 25 26## 属性 27 28| 名称 | 参数类型 | 描述 | 29| ---------------------------------------- | ------- | ---------------------------------------- | 30| columnsTemplate | string | 设置当前网格布局列的数量，不设置时默认1列。<br/>例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。<br/>默认值：'1fr' | 31| rowsTemplate | string | 设置当前网格布局行的数量，不设置时默认1行。<br/>例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。<br/>默认值：'1fr' | 32| columnsGap | Length | 设置列与列的间距。<br/>默认值：0 | 33| rowsGap | Length | 设置行与行的间距。<br/>默认值：0 | 34| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值：BarState.Off | 35| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | 36| scrollBarWidth | string \| number | 设置滚动条的宽度。 | 37| cachedCount | number | 设置预加载的GridItem的数量。具体使用可参考[减少应用白块说明](../../ui/ts-performance-improvement-recommendation.md#减少应用滑动白块)。<br/>默认值：1 | 38| editMode <sup>8+</sup> | boolean | 是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部[GridItem](ts-container-griditem.md)。<br/>默认值：false | 39| layoutDirection<sup>8+</sup> | GridDirection | 设置布局的主轴方向。<br/>默认值：GridDirection.Row | 40| maxCount<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时，表示可显示的最大行数<br/>当layoutDirection是Column/ColumnReverse时，表示可显示的最大列数。<br/>默认值：1 | 41| minCount<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时，表示可显示的最小行数。<br/>当layoutDirection是Column/ColumnReverse时，表示可显示的最小列数。<br/>默认值：1 | 42| cellLength<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时，表示一行的高度。<br/>当layoutDirection是Column/ColumnReverse时，表示一列的宽度。<br/>默认值：0 | 43| multiSelectable<sup>8+</sup> | boolean | 是否开启鼠标框选。<br/>- false：关闭框选。<br/>- true：开启框选。<br/>默认值：false | 44| supportAnimation<sup>8+</sup> | boolean | 是否支持动画。<br/>默认值：false | 45 46## GridDirection枚举说明<sup>8+</sup> 47 48| 名称 | 描述 | 49| ---------- | ---------- | 50| Row | 主轴布局方向沿水平方向布局，即自左往右先填满一行，再去填下一行。 | 51| Column | 主轴布局方向沿垂直方向布局，即自上往下先填满一列，再去填下一列。 | 52| RowReverse | 主轴布局方向沿水平方向反向布局，即自右往左先填满一行，再去填下一行。 | 53| ColumnReverse | 主轴布局方向沿垂直方向反向布局，即自下往上先填满一列，再去填下一列。 | 54 55## 事件 56 57| 名称 | 功能描述 | 58| ------------------------------------------------------------ | ------------------------------------------------------------ | 59| onScrollIndex(event: (first: number) => void) | 当前网格显示的起始位置item发生变化时触发。<br/>- first: 当前显示的网格起始位置的索引值。 | 60| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | 开始拖拽网格元素时触发。<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)。<br/>- itemIndex: 被拖拽网格元素索引值。 | 61| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入网格元素范围内时触发。<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)。 | 62| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在网格元素范围内移动时触发。<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)。<br/>- itemIndex: 拖拽起始位置。<br/>- insertIndex: 拖拽插入位置。 | 63| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开网格元素时触发。<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)。<br/>- itemIndex: 拖拽离开的网格元素索引值。 | 64| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的网格元素可作为拖拽释放目标，当在网格元素内停止拖拽时触发。<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)。<br/>- itemIndex: 拖拽起始位置。<br/>- insertIndex: 拖拽插入位置。<br/>- isSuccess: 是否成功释放。 | 65 66## ItemDragInfo对象说明 67 68| 名称 | 类型 | 描述 | 69| ---------- | ---------- | ---------- | 70| x | number | 当前拖拽点的x坐标。 | 71| y | number | 当前拖拽点的y坐标。 | 72 73## 示例 74 75```ts 76// xxx.ets 77@Entry 78@Component 79struct GridExample { 80 @State Number: String[] = ['0', '1', '2', '3', '4'] 81 82 build() { 83 Column({ space: 5 }) { 84 Grid() { 85 ForEach(this.Number, (day: string) => { 86 ForEach(this.Number, (day: string) => { 87 GridItem() { 88 Text(day) 89 .fontSize(16) 90 .backgroundColor(0xF9CF93) 91 .width('100%') 92 .height('100%') 93 .textAlign(TextAlign.Center) 94 } 95 }, day => day) 96 }, day => day) 97 } 98 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 99 .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 100 .columnsGap(10) 101 .rowsGap(10) 102 .width('90%') 103 .backgroundColor(0xFAEEE0) 104 .height(300) 105 106 Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%') 107 Grid() { 108 ForEach(this.Number, (day: string) => { 109 ForEach(this.Number, (day: string) => { 110 GridItem() { 111 Text(day) 112 .fontSize(16) 113 .backgroundColor(0xF9CF93) 114 .width('100%') 115 .height(80) 116 .textAlign(TextAlign.Center) 117 } 118 }, day => day) 119 }, day => day) 120 } 121 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 122 .columnsGap(10) 123 .rowsGap(10) 124 .onScrollIndex((first: number) => { 125 console.info(first.toString()) 126 }) 127 .width('90%') 128 .backgroundColor(0xFAEEE0) 129 .height(300) 130 }.width('100%').margin({ top: 5 }) 131 } 132} 133``` 134 135
