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