1# GridRow 2 3栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题，保证不同设备上各个模块的布局一致性。 4 5栅格容器组件，仅可以和栅格子组件([GridCol](ts-container-gridcol.md))在栅格布局场景中使用。 6 7> **说明：** 8> 9> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 子组件 13 14可以包含GridCol子组件。 15 16 17## 接口 18GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection}) 19 20从API version 9开始，该接口支持在ArkTS卡片中使用。 21 22**参数：** 23 24| 参数名 |类型|必填|说明| 25|-----|-----|----|----| 26|gutter|Length \| GutterOption| 否 |栅格布局间距。| 27|columns| number \| GridRowColumnOption | 否 |设置布局列数。| 28|breakpoints|BreakPoints| 否 |设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。| 29|direction|GridRowDirection| 否 |栅格布局排列方向。| 30 31## GutterOption 32 33栅格布局间距类型，用于描述栅格子组件不同方向的间距。 34 35从API version 9开始，该接口支持在ArkTS卡片中使用。 36 37| 参数名 | 参数类型 | 必填 | 参数描述 | 38| ----- | ------ | ---- | ---------------------------------------- | 39| x | Length \| GridRowSizeOption | 否 | 栅格子组件水平方向间距。 | 40| y | Length \| GridRowSizeOption | 否 | 栅格子组件竖直方向间距。 | 41 42## GridRowColumnOption 43 44栅格在不同宽度设备类型下，栅格列数。 45 46从API version 9开始，该接口支持在ArkTS卡片中使用。 47 48| 参数名 | 参数类型 | 必填 | 参数描述 | 49| ----- | ------ | ---- | ---------------------------------------- | 50| xs | number | 否 | 在最小宽度类型设备上，栅格容器组件的栅格列数。 | 51| sm | number | 否 | 在小宽度类型设备上，栅格容器组件的栅格列数。 | 52| md | number | 否 | 在中等宽度类型设备上，栅格容器组件的栅格列数。 | 53| lg | number | 否 | 在大宽度类型设备上，栅格容器组件的栅格列数。 | 54| xl | number | 否 | 在特大宽度类型设备上，栅格容器组件的栅格列数。 | 55| xxl | number | 否 | 在超大宽度类型设备上，栅格容器组件的栅格列数。 | 56 57## GridRowSizeOption 58 59栅格在不同宽度设备类型下，gutter的大小。 60 61从API version 9开始，该接口支持在ArkTS卡片中使用。 62 63| 参数名 | 参数类型 | 必填 | 参数描述 | 64| ----- | ------ | ---- | ---------------------------------------- | 65| xs | Length | 否 | 在最小宽度类型设备上，栅格子组件的间距。 | 66| sm | Length | 否 | 在小宽度类型设备上，栅格子组件的间距。 | 67| md | Length | 否 | 在中等宽度类型设备上，栅格子组件的间距。 | 68| lg | Length | 否 | 在大宽度类型设备上，栅格子组件的间距。 | 69| xl | Length | 否 | 在特大宽度类型设备上，栅格子组件的间距。 | 70| xxl | Length | 否 | 在超大宽度类型设备上，栅格子组件的间距。 | 71 72## BreakPoints 73 74设置栅格容器组件的断点。 75 76从API version 9开始，该接口支持在ArkTS卡片中使用。 77 78| 参数名 | 参数类型 | 必填 | 参数描述 | 79| ----- | ------ | ---- | ---------------------------------------- | 80| value | Array<string> | 否 | 设置断点位置的单调递增数组。<br>默认值：["320vp", "600vp", "840vp"] | 81| reference | BreakpointsReference | 否 | 断点切换参照物。<br>默认值：BreakpointsReference.WindowSize | 82```ts 83 // 启用xs、sm、md共3个断点 84 breakpoints: {value: ["100vp", "200vp"]} 85 // 启用xs、sm、md、lg共4个断点，断点范围值必须单调递增 86 breakpoints: {value: ["320vp", "600vp", "840vp"]} 87 // 启用xs、sm、md、lg、xl共5个断点，断点范围数量不可超过断点可取值数量-1 88 breakpoints: {value: ["320vp", "600vp", "840vp", "1080vp"]} 89``` 90 91## BreakpointsReference枚举类型 92 93从API version 9开始，该接口支持在ArkTS卡片中使用。 94 95| 枚举名 | 描述 | 96| -------- | -------- | 97| WindowSize | 以窗口为参照。 | 98| ComponentSize | 以容器为参照。 | 99 100## GridRowDirection枚举类型 101 102从API version 9开始，该接口支持在ArkTS卡片中使用。 103 104| 枚举名 | 描述 | 105| -------- | -------- | 106| Row | 栅格元素按照行方向排列。 | 107| RowReverse | 栅格元素按照逆序行方向排列。 | 108 109栅格最多支持xs、sm、md、lg、xl、xxl六个断点，且名称不可修改。假设传入的数组是[n0, n1, n2, n3, n4]，各个断点取值如下： 110 111|断点|取值范围| 112|---|-----------| 113|xs |[0, n0) | 114|sm |[n0, n1) | 115|md |[n1, n2) | 116|lg |[n2, n3) | 117|xl |[n3, n4) | 118|xxl|[n4, INF) | 119 120**说明：** 121* 栅格元素仅支持Row/RowReverse排列，不支持column/ColumnReverse方向排列。 122* 栅格子组件仅能通过span、offset计算子组件位置与大小。多个子组件span超过规定列数时自动换行。 123* 单个元素span大小超过最大列数时后台默认span为最大column数。 124* 新一行的Offset加上子组件的span超过总列数时，将下一个子组件在新的一行放置。 125* 例：Item1: GridCol({ span: 6})， Item2: GridCol({ span: 8, offset:11}) 126 127|1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 128| ----- | ------ | ---- | ---- | -----|-----|---------|--------|------|------- |------- |------- | 129| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$| - | - | - | - | - | - | 130| - | - | - | - | - | | | | | | | | 131| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$|$\circ$|$\circ$| | | | | 132 133## 属性 134 135除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 136 137| 名称 | 参数类型 | 描述 | 138| ----------------------- | ----------------------------------- | ------------------------------------------- | 139| alignItems<sup>10+</sup> | ItemAlign | 设置GridRow中的GridCol垂直主轴方向对齐方式，默认值：ItemAlign.Start<br/>**说明**：<br/>ItemAlign支持的枚举：ItemAlign.Start、ItemAlign.Center、ItemAlign.End、ItemAlign.Stretch。<br/>GridCol本身也可通过alignSelf([ItemAlign](ts-appendix-enums.md#itemalign))设置自身对齐方式。当上述两种对齐方式都设置时，以GridCol自身设置为准。<br/>从API version 10开始，该接口支持在ArkTS卡片中使用。 | 140 141 142## 事件 143 144### onBreakpointChange 145 146onBreakpointChange(callback: (breakpoints: string) => void) 147 148断点发生变化时触发回调。 149 150从API version 9开始，该接口支持在ArkTS卡片中使用。 151 152**参数：** 153 154| 参数名 | 参数类型 | 必填 | 说明 | 155| ----- | ------ | ---- | ---------------------------------------- | 156|breakpoints| string |是|取值为`"xs"`、`"sm"`、`"md"`、`"lg"`、`"xl"`、`"xxl"`。| 157 158## 示例 159 160```ts 161// xxx.ets 162@Entry 163@Component 164struct GridRowExample { 165 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown] 166 @State currentBp: string = 'unknown' 167 168 build() { 169 Column() { 170 GridRow({ 171 columns: 5, 172 gutter: { x: 5, y: 10 }, 173 breakpoints: { value: ["400vp", "600vp", "800vp"], 174 reference: BreakpointsReference.WindowSize }, 175 direction: GridRowDirection.Row 176 }) { 177 ForEach(this.bgColors, (color: Color) => { 178 GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 }, offset: 0, order: 0 }) { 179 Row().width("100%").height("20vp") 180 }.borderColor(color).borderWidth(2) 181 }) 182 }.width("100%").height("100%") 183 .onBreakpointChange((breakpoint) => { 184 this.currentBp = breakpoint 185 }) 186 }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200) 187 .border({ color: '#880606', width: 2 }) 188 } 189} 190``` 191 192 193
