1# GridCol 2 3栅格子组件,必须作为栅格容器组件([GridRow](ts-container-gridrow.md))的子组件使用。 4 5> **说明:** 6> 7> 该组件从API version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11可以包含单个子组件。 12## 接口 13 14GridCol(option?: GridColOptions) 15 16栅格列布局组件。 17 18**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。 19 20**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 21 22**系统能力:** SystemCapability.ArkUI.ArkUI.Full 23 24**参数:** 25| 参数名 | 类型 | 必填 | 说明 | 26| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 27| option | [GridColOptions](#gridcoloptions对象说明) | 否 | 栅格布局子组件参数。 | 28 29## GridColOptions对象说明 30 31设置栅格列布局组件布局选项。 32 33**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。 34 35**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 36 37**系统能力:** SystemCapability.ArkUI.ArkUI.Full 38 39| 名称 | 类型 | 必填 | 说明 | 40| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 41| span | number \| [GridColColumnOption](#gridcolcolumnoption) | 否 | 栅格子组件占用栅格容器组件的列数。span为0表示该元素不参与布局计算,即不会被渲染。<br/>取值为大于0的整数,默认值:1 | 42| offset | number \| [GridColColumnOption](#gridcolcolumnoption) | 否 | 栅格子组件相对于原本位置偏移的列数。<br/>取值为大于0的整数,默认值:0 | 43| order | number \| [GridColColumnOption](#gridcolcolumnoption) | 否 | 元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。<br/>取值为大于0的整数,默认值:0<br/>**说明:**<br/>当子组件不设置order或者设置相同的order,子组件按照代码顺序展示。<br/>当子组件部分设置order,部分不设置order时,未设置order的子组件依次排序靠前,设置了order的子组件按照数值从小到大排列。 | 44 45`span`、`offset`、`order`属性按照`xs`、`sm`、`md`、`lg`、`xl`、`xxl`的顺序具有“继承性”,未设置值的断点将会从前一个断点取值。 46 47## 属性 48除支持[通用属性](ts-component-general-attributes.md)外,还支持以下属性: 49 50### span 51 52span(value: number | GridColColumnOption) 53 54设置占用列数。span为0,意味着该元素不参与布局计算,即不会被渲染。 55 56**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。 57 58**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 59 60**系统能力:** SystemCapability.ArkUI.ArkUI.Full 61 62**参数:** 63 64| 参数名 | 类型 | 必填 | 说明 | 65| ------ | ------------------------------------------------------------ | ---- | ------------------------ | 66| value | number \| [GridColColumnOption](#gridcolcolumnoption) | 是 | 占用列数。<br/>取值为大于0的整数,默认值:1 | 67 68### gridColOffset 69 70gridColOffset(value: number | GridColColumnOption) 71 72设置相对于前一个栅格子组件偏移的列数。 73 74**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。 75 76**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 77 78**系统能力:** SystemCapability.ArkUI.ArkUI.Full 79 80**参数:** 81 82| 参数名 | 类型 | 必填 | 说明 | 83| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ | 84| value | number \| [GridColColumnOption](#gridcolcolumnoption) | 是 | 相对于前一个栅格子组件偏移的列数。<br/>取值为大于0的整数,默认值:0 | 85 86### order 87 88order(value: number | GridColColumnOption) 89 90设置元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。 91 92**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。 93 94**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 95 96**系统能力:** SystemCapability.ArkUI.ArkUI.Full 97 98**参数:** 99 100| 参数名 | 类型 | 必填 | 说明 | 101| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 102| value | number \| [GridColColumnOption](#gridcolcolumnoption) | 是 | 元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。<br/>取值为大于0的整数,默认值:0 | 103 104## GridColColumnOption 105 106用于自定义指定在不同宽度设备类型上,栅格子组件占据的栅格数量单位。 107 108**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。 109 110**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 111 112**系统能力:** SystemCapability.ArkUI.ArkUI.Full 113 114| 名称 | 类型 | 必填 | 说明 | 115| ----- | ------ | ---- | ---------------------------------------- | 116| xs | number | 否 | 在栅格大小为xs的设备上,栅格容器组件的栅格列数。 | 117| sm | number | 否 | 在栅格大小为sm的设备上,栅格容器组件的栅格列数。 | 118| md | number | 否 | 在栅格大小为md的设备上,栅格容器组件的栅格列数。 | 119| lg | number | 否 | 在栅格大小为lg的设备上,栅格容器组件的栅格列数。 | 120| xl | number | 否 | 在栅格大小为xl的设备上,栅格容器组件的栅格列数。 | 121| xxl | number | 否 | 在栅格大小为xxl的设备上,栅格容器组件的栅格列数。 | 122 123## 示例 124请参考栅格容器示例代码([GridRow](ts-container-gridrow.md#示例))。