The Column component lays out child components vertically.
This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
If no height or width is set for the Column component, the component automatically adapts to the size of its child components in the main axis and cross axis respectively.
[h2]Column
Column(options?: ColumnOptions)
Creates a vertical linear layout container. You can set the spacing between child components.
Excessive component nesting (either too deep a hierarchy or too many nested components) incurs significant performance overhead. For performance purposes, you are advised to remove redundant nodes to simplify the component tree, use layout boundaries to reduce redundant layout calculations, properly apply rendering control syntax and layout component methods to minimize unnecessary re-renders and computations. For details about the best practices, see Layout Optimization.
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| options18+ | ColumnOptions | No | Vertical spacing between two adjacent child components. The value can be of the number or string type. |
[h2]Column18+
Column(options?: ColumnOptions | ColumnOptionsV2)
Creates a vertical linear layout container. You can set the spacing between child components.
Widget capability: This API can be used in ArkTS widgets since API version 18.
Atomic service API: This API can be used in atomic services since API version 18.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| options | ColumnOptions | ColumnOptionsV2 | No | Vertical spacing between two adjacent child components. The value can be of the number, string, or Resource type. |
ColumnOptions18+
Sets the spacing between child components of the Column component.
To standardize anonymous object definitions, the element definitions here have been revised in API version 18. While historical version information is preserved for anonymous objects, there may be cases where the outer element's @since version number is higher than inner elements'. This does not affect interface usability.
Widget capability: This API can be used in ArkTS widgets since API version 18.
Atomic service API: This API can be used in atomic services since API version 18.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| space7+ | string | number | No | Yes | Vertical spacing between two adjacent child components. This parameter has no effect if the value specified is a negative number, or if justifyContent is set to FlexAlign.SpaceBetween, FlexAlign.SpaceAround, or FlexAlign.SpaceEvenly Default value: 0 Invalid values are treated as the default value. Unit: vp NOTE The value of space can be a number greater than or equal to 0 or a string that can be converted to a number. Widget capability: This API can be used in ArkTS widgets since API version 9. Atomic service API: This API can be used in atomic services since API version 11. |
ColumnOptionsV218+
Sets the spacing between child components of the Column component. The spacing type SpaceType can be number, string, or Resource.
Widget capability: This API can be used in ArkTS widgets since API version 18.
Atomic service API: This API can be used in atomic services since API version 18.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| space | SpaceType | No | Yes | Vertical spacing between two adjacent child components. This parameter has no effect if the value specified is a negative number, or if justifyContent is set to FlexAlign.SpaceBetween, FlexAlign.SpaceAround, or FlexAlign.SpaceEvenly. Default value: 0 Unit: vp Invalid values are treated as the default value. NOTE 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. |
SpaceType18+
type SpaceType = string | number | Resource
Describes the supported data types for the space parameter in the constructors of the Column component. The type is a union of the following types.
Widget capability: This API can be used in ArkTS widgets since API version 18.
Atomic service API: This API can be used in atomic services since API version 18.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Type | Description |
|---|---|
| number | Represents a numeric value. It can take any numerical value. |
| string | Represents a string value. It can take any string value. |
| Resource | Represents a resource reference type. It can take values from system resources or application resources. |
[h2]alignItems
alignItems(value: HorizontalAlign)
Alignment mode of the child components in the horizontal direction.
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | HorizontalAlign | Yes | Alignment mode of child components in the horizontal direction. Default value: HorizontalAlign.Center |
[h2]justifyContent8+
justifyContent(value: FlexAlign)
Alignment mode of the child components in the vertical direction.
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | FlexAlign | Yes | Alignment mode of child components in the vertical direction. Default value: FlexAlign.Start |
During the column layout, if flexShrink is not set for a child component, the child component is not compressed by default. This can result in the total main axis size of all child components exceeding the container's main axis size, which makes FlexAlign.Center and FlexAlign.End ineffective.
[h2]reverse12+
reverse(isReversed: Optional<boolean>)
Sets whether to reverse the vertical arrangement of child components.
Widget capability: This API can be used in ArkTS widgets since API version 12.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| isReversed | Optional<boolean> | Yes | Whether to reverse the vertical arrangement of child components. Default value: true. true: Child components are arranged in reverse order vertically. false: Child components are arranged in normal order vertically. |
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.
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.
[h2]Example 1: Setting the Layout Attributes of the Column Component
This example demonstrates how to set the layout attributes of the Column component, such as the spacing and alignment mode and its effect.
// resources/base/element/string.json
{
"string": [
{
"name": "stringSpace",
"value": "5"
}
]
} // xxx.ets
@Entry
@Component
struct ColumnExample {
build() {
Scroll() {
Column({ space: 5 }) {
// Set the vertical spacing between two adjacent child components to 5.
Text('space').width('90%')
Column({ space: 5 }) {
Column().width('100%').height(30).backgroundColor(0xAFEEEE)
Column().width('100%').height(30).backgroundColor(0x00FFFF)
}.width('90%').height(100).border({ width: 1 })
// Set the spacing between child elements using the Resource type.
Text('Resource space').width('90%')
Column({ space: $r('app.string.stringSpace') }) {
Column().width('100%').height(30).backgroundColor(0xAFEEEE)
Column().width('100%').height(30).backgroundColor(0x00FFFF)
}.width('90%').height(100).border({ width: 1 })
// Set the alignment mode of the child components in the horizontal direction.
Text('alignItems(Start)').width('90%')
Column() {
Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
Text('alignItems(End)').width('90%')
Column() {
Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
Text('alignItems(Center)').width('90%')
Column() {
Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
// Set the alignment mode of the child components in the vertical direction.
Text('justifyContent(Center)').width('90%')
Column() {
Column().width('90%').height(30).backgroundColor(0xAFEEEE)
Column().width('90%').height(30).backgroundColor(0x00FFFF)
}.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
Text('justifyContent(End)').width('90%')
Column() {
Column().width('90%').height(30).backgroundColor(0xAFEEEE)
Column().width('90%').height(30).backgroundColor(0x00FFFF)
}.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
}.width('100%').padding({ top: 5 })
}.width('100%').height('100%')
}
} 
[h2]Example 2: Configuring the Reverse Attribute
This example demonstrates how to set the reverse attribute of the Column component and its effect.
@Entry
@Component
struct ColumnReverseSample {
build() {
Column() {
Text("1")
.width(50)
.height(100)
.backgroundColor(0xAFEEEE)
Text("2")
.width(50)
.height(100)
.backgroundColor(0x00FFFF)
}
.height(300)
.width(100)
.border({ width: 1 })
.reverse(true)
}
} 