• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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&nbsp;\|&nbsp;[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&nbsp;\|&nbsp;[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&nbsp;\|&nbsp;[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#示例))。