1# Column 2 3沿垂直方向布局的容器。 4 5> **说明：** 6> 7> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。 13 14 15## 接口 16 17Column(value?: {space?: string | number}) 18 19**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| -------- | -------- | -------- | -------- | 29| value | {space?: string \| number} | 否 | 纵向布局元素垂直方向间距。<br/>从API version 9开始，space为负数或者[justifyContent](ts-container-column.md#justifycontent8)设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。<br/>默认值：0<br/>单位：vp<br/>**说明：**<br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 | 30 31## 属性 32 33除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 34 35### alignItems 36 37alignItems(value: HorizontalAlign) 38 39设置子组件在水平方向上的对齐格式。 40 41**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 42 43**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 44 45**系统能力：** SystemCapability.ArkUI.ArkUI.Full 46 47**参数：** 48 49| 参数名 | 类型 | 必填 | 说明 | 50| ------ | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | 51| value | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 是 | 子组件在水平方向上的对齐格式。<br/>默认值：HorizontalAlign.Center | 52 53### justifyContent<sup>8+</sup> 54 55justifyContent(value: FlexAlign) 56 57设置子组件在垂直方向上的对齐格式。 58 59**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 60 61**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 62 63**系统能力：** SystemCapability.ArkUI.ArkUI.Full 64 65**参数：** 66 67| 参数名 | 类型 | 必填 | 说明 | 68| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 69| value | [FlexAlign](ts-appendix-enums.md#flexalign) | 是 | 子组件在垂直方向上的对齐格式。<br/>默认值：FlexAlign.Start | 70 71> **说明：** 72> 73> Column布局时若子组件不设置[flexShrink](ts-universal-attributes-flex-layout.md#flexshrink)则默认不会压缩子组件，即所有子组件主轴大小累加可超过容器主轴。 74 75### reverse<sup>12+</sup> 76 77reverse(isReversed: Optional\<boolean\>) 78 79设置子组件在主轴（即竖直方向）上的排列是否反转。 80 81**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 82 83**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 84 85**系统能力：** SystemCapability.ArkUI.ArkUI.Full 86 87**参数：** 88 89| 参数名 | 类型 | 必填 | 说明 | 90| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 91| isReversed | Optional\<boolean\> | 是 | 子组件在主轴（即竖直方向）上的排列是否反转。<br/>默认值：true | 92 93> **说明：** 94> 95> 若未设置reverse属性，主轴方向不反转；若设置了reverse属性，且参数值为undefined，则视为默认值true，主轴方向反转。<br/>通用属性direction只能改变Column交叉轴方向，不改变Column主轴方向，因此与reverse属性互不影响。 96 97## 事件 98 99支持[通用事件](ts-component-general-events.md)。 100 101## 示例 102 103设置垂直方向的布局属性，如间距、对齐方式等。 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 // 设置子元素垂直方向间距为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 // 设置子元素水平方向对齐方式 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 // 设置子元素垂直方向的对齐方式 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 168
