• 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
19Since API version 9, this API is supported in ArkTS widgets.
20
21**Parameters**
22
23| Name| Type| Mandatory| Description|
24| -------- | -------- | -------- | -------- |
25| 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 **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround** or **FlexAlign.SpaceEvenly**.<br>Default value: **0**<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.|
26
27## Attributes
28
29In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
30
31| Name| Type| Description|
32| -------- | -------- | -------- |
33| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Alignment mode of the child components in the horizontal direction.<br>Default value: **HorizontalAlign.Center**<br>Since API version 9, this API is supported in ArkTS widgets.|
34| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the vertical direction.<br>Default value: **FlexAlign.Start**<br>Since API version 9, this API is supported in ArkTS widgets.|
35
36## Example
37
38```ts
39// xxx.ets
40@Entry
41@Component
42struct ColumnExample {
43  build() {
44    Column() {
45      // Set the vertical spacing between two adjacent child components to 5.
46      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
47      Column({ space: 5 }) {
48        Column().width('100%').height(30).backgroundColor(0xAFEEEE)
49        Column().width('100%').height(30).backgroundColor(0x00FFFF)
50      }.width('90%').height(100).border({ width: 1 })
51
52      // Set the alignment mode of the child components in the horizontal direction.
53      Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
54      Column() {
55        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
56        Column().width('50%').height(30).backgroundColor(0x00FFFF)
57      }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
58
59      Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
60      Column() {
61        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
62        Column().width('50%').height(30).backgroundColor(0x00FFFF)
63      }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
64
65      Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
66      Column() {
67        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
68        Column().width('50%').height(30).backgroundColor(0x00FFFF)
69      }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
70
71      // Set the alignment mode of the child components in the vertical direction.
72      Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
73      Column() {
74        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
75        Column().width('90%').height(30).backgroundColor(0x00FFFF)
76      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
77
78      Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
79      Column() {
80        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
81        Column().width('90%').height(30).backgroundColor(0x00FFFF)
82      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
83    }.width('100%').padding({ top: 5 })
84  }
85}
86```
87
88![Column](figures/Column.png)
89