• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Column
2
3The **Column** component lays out child components vertically.
4
5>  **NOTE**
6>
7>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12Supported
13
14
15## APIs
16
17Column(value?: {space?: string | number})
18
19**Widget capability**: This API can be used in ArkTS widgets since API version 9.
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name| Type| Mandatory| Description|
28| -------- | -------- | -------- | -------- |
29|value | {space?: string \| number} | No| Vertical spacing between two adjacent child components.<br>Since API version 9, this parameter does not take effect when it is set to a negative number or when [justifyContent](ts-container-column.md#justifycontent8) is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround**, or **FlexAlign.SpaceEvenly**.<br>Default value: **0**<br>Unit: vp<br>**NOTE**<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
30
31## Attributes
32
33In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported.
34
35### alignItems
36
37alignItems(value: HorizontalAlign)
38
39Alignment mode of the child components in the horizontal direction.
40
41**Widget capability**: This API can be used in ArkTS widgets since API version 9.
42
43**Atomic service API**: This API can be used in atomic services since API version 11.
44
45**System capability**: SystemCapability.ArkUI.ArkUI.Full
46
47**Parameters**
48
49| Name| Type                                                   | Mandatory| Description                                                        |
50| ------ | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
51| value  | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Yes  | Alignment mode of child components in the horizontal direction.<br>Default value: **HorizontalAlign.Center**|
52
53### justifyContent<sup>8+</sup>
54
55justifyContent(value: FlexAlign)
56
57Alignment mode of the child components in the vertical direction.
58
59**Widget capability**: This API can be used in ArkTS widgets since API version 9.
60
61**Atomic service API**: This API can be used in atomic services since API version 11.
62
63**System capability**: SystemCapability.ArkUI.ArkUI.Full
64
65**Parameters**
66
67| Name| Type                                       | Mandatory| Description                                                      |
68| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
69| value  | [FlexAlign](ts-appendix-enums.md#flexalign) | Yes  | Alignment mode of child components in the vertical direction.<br>Default value: **FlexAlign.Start**|
70
71>  **NOTE**
72>
73>  During column layout, child components do not shrink if [flexShrink](ts-universal-attributes-flex-layout.md#flexshrink) is not set for them. In this case, the total size of the child components on the main axis can exceed the size of the container on the main axis.
74
75### reverse<sup>12+</sup>
76
77reverse(isReversed: Optional\<boolean\>)
78
79Sets whether to reverse the arrangement of child components on the main axis (vertical direction).
80
81**Widget capability**: This API can be used in ArkTS widgets since API version 12.
82
83**Atomic service API**: This API can be used in atomic services since API version 12.
84
85**System capability**: SystemCapability.ArkUI.ArkUI.Full
86
87**Parameters**
88
89| Name| Type                                       | Mandatory| Description                                                      |
90| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
91| isReversed  | Optional\<boolean\> | Yes  | Whether to reverse the arrangement of child components on the main axis (vertical direction).<br>Default value: **true**|
92
93>  **NOTE**
94>
95>  If the **reverse** attribute is not set, the arrangement on the main axis remains in the normal order. If the attribute is set to **undefined**, it defaults to **true**, which reverses the arrangement on the main axis.<br>The **direction** attribute only changes the cross axis direction of the column and does not impact the main axis direction. Therefore, it is independent of the **reverse** attribute.
96
97## Events
98
99The [universal events](ts-component-general-events.md) are supported.
100
101## Example
102
103This example demonstrates how to set horizontal layout properties, such as spacing and alignment, using the **Column** component.
104
105```json
106// resources/base/element/string.json
107{
108  "string": [
109    {
110      "name": "stringSpace",
111      "value": "5"
112    }
113  ]
114}
115```
116
117```ts
118// xxx.ets
119@Entry
120@Component
121struct ColumnExample {
122  build() {
123    Column({ space: 5 }) {
124      // Set the vertical spacing between two adjacent child components to 5.
125      Text('space').width('90%')
126      Column({ space: 5 }) {
127        Column().width('100%').height(30).backgroundColor(0xAFEEEE)
128        Column().width('100%').height(30).backgroundColor(0x00FFFF)
129      }.width('90%').height(100).border({ width: 1 })
130
131      // Set the alignment mode of the child components in the horizontal direction.
132      Text('alignItems(Start)').width('90%')
133      Column() {
134        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
135        Column().width('50%').height(30).backgroundColor(0x00FFFF)
136      }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
137
138      Text('alignItems(End)').width('90%')
139      Column() {
140        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
141        Column().width('50%').height(30).backgroundColor(0x00FFFF)
142      }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
143
144      Text('alignItems(Center)').width('90%')
145      Column() {
146        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
147        Column().width('50%').height(30).backgroundColor(0x00FFFF)
148      }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
149
150      // Set the alignment mode of the child components in the vertical direction.
151      Text('justifyContent(Center)').width('90%')
152      Column() {
153        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
154        Column().width('90%').height(30).backgroundColor(0x00FFFF)
155      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
156
157      Text('justifyContent(End)').width('90%')
158      Column() {
159        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
160        Column().width('90%').height(30).backgroundColor(0x00FFFF)
161      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
162    }.width('100%').padding({ top: 5 })
163  }
164}
165```
166
167![column](figures/column.png)
168