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