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 17### Column 18Column(options?: ColumnOptions) 19 20Creates a vertical linear layout container. You can set the spacing between child components, which can be of type number or string. 21 22**Widget capability**: This API can be used in ArkTS widgets since API version 9. 23 24**Atomic service API**: This API can be used in atomic services since API version 11. 25 26**System capability**: SystemCapability.ArkUI.ArkUI.Full 27 28**Parameters** 29 30| Name| Type| Mandatory| Description| 31| -------- | -------- | -------- | -------- | 32| options | [ColumnOptions](#columnoptions14) | No| Vertical spacing between two adjacent child components.| 33 34### Column<sup>16+</sup> 35Column(options?: ColumnOptions | ColumnOptionsV2) 36 37Creates a vertical linear layout container. You can set the spacing between child components, which can be of type number, string, or Resource. 38 39**Widget capability**: This API can be used in ArkTS widgets since API version 16. 40 41**Atomic service API**: This API can be used in atomic services since API version 16. 42 43**System capability**: SystemCapability.ArkUI.ArkUI.Full 44 45**Parameters** 46 47| Name| Type| Mandatory| Description| 48| -------- | -------- | -------- | -------- | 49| options | [ColumnOptions](#columnoptions14) \| [ColumnOptionsV2](#columnoptionsv216) | No| Vertical spacing between two adjacent child components.| 50 51## ColumnOptions<sup>14+</sup> 52 53Defines the spacing properties for child components used for constructing a **Column** component. 54 55**Widget capability**: This API can be used in ArkTS widgets since API version 14. 56 57**Atomic service API**: This API can be used in atomic services since API version 14. 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61| Name| Type| Mandatory| Description| 62| -------- | -------- | -------- | -------- | 63| space | string \| number | No| Vertical spacing between two adjacent child components.<br>This parameter does not take effect if the value specified is a negative number, or if [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 of **space** can be a number greater than or equal to 0 or a string that can be converted to a number.| 64 65## ColumnOptionsV2<sup>16+</sup> 66 67Defines the spacing properties for child components used for constructing a **Column** component. 68 69**Widget capability**: This API can be used in ArkTS widgets since API version 16. 70 71**Atomic service API**: This API can be used in atomic services since API version 16. 72 73**System capability**: SystemCapability.ArkUI.ArkUI.Full 74 75| Name| Type| Mandatory| Description| 76| -------- | -------- | -------- | -------- | 77| space | [SpaceType](#spacetype16) | No| Vertical spacing between two adjacent child components.<br>This parameter does not take effect if the value specified is a negative number, or if **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround**, or **FlexAlign.SpaceEvenly**.<br>Default value: **0**, in vp<br>**NOTE**<br>The value of **space** can be a number greater than or equal to 0, a string that can be converted to a number, or a Resource type that can be converted to a number.| 78 79## SpaceType<sup>16+</sup> 80 81type SpaceType = number | string | Resource 82 83Describes the supported data types for the **space** parameter in the constructors of **Row** and **Column** components. The type is a union of the following types. 84 85|Type|Description| 86|---|---| 87|number|Represents a numeric value. It can take any numerical value.| 88|string|Represents a string value. It can take any string value.| 89|[Resource](ts-types.md#resource)|Represents a resource reference type. It can take values from system resources or application resources.| 90 91**Atomic service API**: This API can be used in atomic services since API version 16. 92 93## Attributes 94 95In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 96 97### alignItems 98 99alignItems(value: HorizontalAlign) 100 101Alignment mode of the child components in the horizontal direction. 102 103**Widget capability**: This API can be used in ArkTS widgets since API version 9. 104 105**Atomic service API**: This API can be used in atomic services since API version 11. 106 107**System capability**: SystemCapability.ArkUI.ArkUI.Full 108 109**Parameters** 110 111| Name| Type | Mandatory| Description | 112| ------ | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | 113| value | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Yes | Alignment mode of child components in the horizontal direction.<br>Default value: **HorizontalAlign.Center**| 114 115### justifyContent<sup>8+</sup> 116 117justifyContent(value: FlexAlign) 118 119Alignment mode of the child components in the vertical direction. 120 121**Widget capability**: This API can be used in ArkTS widgets since API version 9. 122 123**Atomic service API**: This API can be used in atomic services since API version 11. 124 125**System capability**: SystemCapability.ArkUI.ArkUI.Full 126 127**Parameters** 128 129| Name| Type | Mandatory| Description | 130| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 131| value | [FlexAlign](ts-appendix-enums.md#flexalign) | Yes | Alignment mode of child components in the vertical direction.<br>Default value: **FlexAlign.Start**| 132 133> **NOTE** 134> 135> 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. 136 137### reverse<sup>12+</sup> 138 139reverse(isReversed: Optional\<boolean\>) 140 141Sets whether to reverse the arrangement of child components on the main axis (vertical direction). 142 143**Widget capability**: This API can be used in ArkTS widgets since API version 12. 144 145**Atomic service API**: This API can be used in atomic services since API version 12. 146 147**System capability**: SystemCapability.ArkUI.ArkUI.Full 148 149**Parameters** 150 151| Name| Type | Mandatory| Description | 152| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 153| isReversed | Optional\<boolean\> | Yes | Whether to reverse the arrangement of child components on the main axis (vertical direction).<br>Default value: **true**| 154 155> **NOTE** 156> 157> 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. 158 159## Events 160 161The [universal events](ts-component-general-events.md) are supported. 162 163## Example 164 165This example demonstrates how to set horizontal layout properties, such as spacing and alignment, using the **Column** component. 166 167```json 168// resources/base/element/string.json 169{ 170 "string": [ 171 { 172 "name": "stringSpace", 173 "value": "5" 174 } 175 ] 176} 177``` 178 179```ts 180// xxx.ets 181@Entry 182@Component 183struct ColumnExample { 184 build() { 185 Column({ space: 5 }) { 186 // Set the vertical spacing between two adjacent child components to 5. 187 Text('space').width('90%') 188 Column({ space: 5 }) { 189 Column().width('100%').height(30).backgroundColor(0xAFEEEE) 190 Column().width('100%').height(30).backgroundColor(0x00FFFF) 191 }.width('90%').height(100).border({ width: 1 }) 192 193 // Set the spacing between child elements using the Resource type. 194 Text('Resource space').width('90%') 195 Column({ space: $r("app.string.stringSpace") }) { 196 Column().width('100%').height(30).backgroundColor(0xAFEEEE) 197 Column().width('100%').height(30).backgroundColor(0x00FFFF) 198 }.width('90%').height(100).border({ width: 1 }) 199 200 // Set the alignment mode of the child components in the horizontal direction. 201 Text('alignItems(Start)').width('90%') 202 Column() { 203 Column().width('50%').height(30).backgroundColor(0xAFEEEE) 204 Column().width('50%').height(30).backgroundColor(0x00FFFF) 205 }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) 206 207 Text('alignItems(End)').width('90%') 208 Column() { 209 Column().width('50%').height(30).backgroundColor(0xAFEEEE) 210 Column().width('50%').height(30).backgroundColor(0x00FFFF) 211 }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) 212 213 Text('alignItems(Center)').width('90%') 214 Column() { 215 Column().width('50%').height(30).backgroundColor(0xAFEEEE) 216 Column().width('50%').height(30).backgroundColor(0x00FFFF) 217 }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 }) 218 219 // Set the alignment mode of the child components in the vertical direction. 220 Text('justifyContent(Center)').width('90%') 221 Column() { 222 Column().width('90%').height(30).backgroundColor(0xAFEEEE) 223 Column().width('90%').height(30).backgroundColor(0x00FFFF) 224 }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center) 225 226 Text('justifyContent(End)').width('90%') 227 Column() { 228 Column().width('90%').height(30).backgroundColor(0xAFEEEE) 229 Column().width('90%').height(30).backgroundColor(0x00FFFF) 230 }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End) 231 }.width('100%').padding({ top: 5 }) 232 } 233} 234``` 235 236 237
