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