1# Column 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @camlostshi--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9沿垂直方向布局的容器。 10 11> **说明：** 12> 13> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> Column未设置高度或宽度时，在主轴或交叉轴方向上自适应子组件大小。 16 17 18## 子组件 19 20可以包含子组件。 21 22 23## 接口 24 25### Column 26Column(options?: ColumnOptions) 27 28创建垂直方向线性布局容器，可以设置子组件的间距，间距类型为number或string类型。 29 30> **说明：** 31> 32> 在复杂界面中使用多组件嵌套时，若布局组件的嵌套层数过深或嵌套的组件数量过多，将会产生额外开销。建议通过移除冗余节点、利用布局边界减少布局计算、合理采用渲染控制语法及布局组件方法来优化性能。最佳实践请参考[合理使用布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-improve-layout-performance)。 33 34**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 35 36**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 37 38**系统能力：** SystemCapability.ArkUI.ArkUI.Full 39 40**参数：** 41 42| 参数名 | 类型 | 必填 | 说明 | 43| -------- | -------- | -------- | -------- | 44| options | [ColumnOptions<sup>18+</sup>](#columnoptions18对象说明) | 否 | 纵向布局元素垂直方向间距。 | 45 46### Column<sup>18+</sup> 47Column(options?: ColumnOptions | ColumnOptionsV2) 48 49创建垂直方向线性布局容器，可以设置子组件的间距，间距类型为number、string或Resource类型。 50 51**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 52 53**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57**参数：** 58 59| 参数名 | 类型 | 必填 | 说明 | 60| -------- | -------- | -------- | -------- | 61| options | [ColumnOptions](#columnoptions18对象说明) \| [ColumnOptionsV2](#columnoptionsv218对象说明) | 否 | 纵向布局元素垂直方向间距。 | 62 63## ColumnOptions<sup>18+</sup>对象说明 64 65设置Column组件的子组件间距属性。 66 67> **说明：** 68> 69> 为规范匿名对象的定义，API 18版本修改了此处的元素定义。其中，保留了历史匿名对象的起始版本信息，会出现外层元素@since版本号高于内层元素版本号的情况，但这不影响接口的使用。 70 71**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 72 73**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 74 75**系统能力：** SystemCapability.ArkUI.ArkUI.Full 76 77| 名称 | 类型 | 只读 | 可选 | 说明 | 78| -------- | -------- | -------- | -------- | -------- | 79| space<sup>7+</sup> | string \| number | 否 | 是 | 纵向布局元素垂直方向间距。<br/>space为负数或者[justifyContent](ts-container-column.md#justifycontent8)设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时，space不生效。<br/>默认值：0 <br />非法值：按默认值处理。<br/>单位：vp<br/>**说明：**<br/>space取值是大于等于0的数字，或者可以转换为数字的字符串。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 80 81## ColumnOptionsV2<sup>18+</sup>对象说明 82 83设置Column组件的子组件间距属性。间距类型SpaceType支持number、string或Resource类型。 84 85**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 86 87**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 88 89**系统能力：** SystemCapability.ArkUI.ArkUI.Full 90 91| 名称 | 类型 | 只读 | 可选 | 说明 | 92| -------- | -------- | -------- | -------- | -------- | 93| space | [SpaceType](#spacetype18) | 否 | 是 | 纵向布局元素垂直方向间距。<br/>space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时，space不生效。<br/>默认值：0，单位vp <br />非法值：按默认值处理。<br/>**说明：** <br/>space取值是大于等于0的数字，或者可以转换为数字的字符串，或者可以转换为数字的Resource类型数据。 | 94 95## SpaceType<sup>18+</sup> 96 97type SpaceType = string | number | Resource 98 99Column组件构造函数中space支持的数据类型，取值类型为下表类型中的并集。 100 101**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 102 103**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 104 105**系统能力：** SystemCapability.ArkUI.ArkUI.Full 106 107|类型 |说明| 108|---|---| 109|number|表示类型为数字，可取任意值。| 110|string|表示值类型为字符串，可取任意值。| 111|[Resource](ts-types.md#resource)|表示值为资源引用类型，取值为从系统资源或者应用资源中引入的数据值。| 112 113 114## 属性 115 116除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 117 118### alignItems 119 120alignItems(value: HorizontalAlign) 121 122设置子组件在水平方向上的对齐格式。 123 124**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 125 126**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 127 128**系统能力：** SystemCapability.ArkUI.ArkUI.Full 129 130**参数：** 131 132| 参数名 | 类型 | 必填 | 说明 | 133| ------ | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | 134| value | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 是 | 子组件在水平方向上的对齐格式。<br/>默认值：HorizontalAlign.Center | 135 136### justifyContent<sup>8+</sup> 137 138justifyContent(value: FlexAlign) 139 140设置子组件在垂直方向上的对齐格式。 141 142**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 143 144**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 145 146**系统能力：** SystemCapability.ArkUI.ArkUI.Full 147 148**参数：** 149 150| 参数名 | 类型 | 必填 | 说明 | 151| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 152| value | [FlexAlign](ts-appendix-enums.md#flexalign) | 是 | 子组件在垂直方向上的对齐格式。<br/>默认值：FlexAlign.Start | 153 154> **说明：** 155> 156> Column布局时若子组件不设置[flexShrink](ts-universal-attributes-flex-layout.md#flexshrink)则默认不会压缩子组件，即所有子组件主轴大小累加可超过容器主轴，此时FlexAlign.Center和FlexAlign.End会失效。 157 158### reverse<sup>12+</sup> 159 160reverse(isReversed: Optional\<boolean\>) 161 162设置子组件在垂直方向上的排列是否反转。 163 164**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 165 166**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 167 168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 169 170**参数：** 171 172| 参数名 | 类型 | 必填 | 说明 | 173| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 174| isReversed | Optional\<boolean\> | 是 | 子组件在垂直方向上的排列是否反转。<br/>默认值：true，设置true表示子组件在垂直方向上反转排列，设置false表示子组件在垂直方向上正序排列。 | 175 176> **说明：** 177> 178> 若未设置reverse属性，主轴方向不反转；若设置了reverse属性，且参数值为undefined，则视为默认值true，主轴方向反转。<br/>通用属性direction只能改变Column交叉轴方向，不改变Column主轴方向，因此与reverse属性互不影响。 179 180## 事件 181 182支持[通用事件](ts-component-general-events.md)。 183 184## 示例 185 186设置垂直方向的布局属性，如间距、对齐方式等。 187 188```json 189// resources/base/element/string.json 190{ 191 "string": [ 192 { 193 "name": "stringSpace", 194 "value": "5" 195 } 196 ] 197} 198``` 199 200```ts 201// xxx.ets 202@Entry 203@Component 204struct ColumnExample { 205 build() { 206 Column({ space: 5 }) { 207 // 设置子元素垂直方向间距为5 208 Text('space').width('90%') 209 Column({ space: 5 }) { 210 Column().width('100%').height(30).backgroundColor(0xAFEEEE) 211 Column().width('100%').height(30).backgroundColor(0x00FFFF) 212 }.width('90%').height(100).border({ width: 1 }) 213 214 // 通过资源引用方式设置子元素垂直方向间距 215 Text('Resource space').width('90%') 216 Column({ space: $r("app.string.stringSpace") }) { 217 Column().width('100%').height(30).backgroundColor(0xAFEEEE) 218 Column().width('100%').height(30).backgroundColor(0x00FFFF) 219 }.width('90%').height(100).border({ width: 1 }) 220 221 // 设置子元素水平方向对齐方式 222 Text('alignItems(Start)').width('90%') 223 Column() { 224 Column().width('50%').height(30).backgroundColor(0xAFEEEE) 225 Column().width('50%').height(30).backgroundColor(0x00FFFF) 226 }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) 227 228 Text('alignItems(End)').width('90%') 229 Column() { 230 Column().width('50%').height(30).backgroundColor(0xAFEEEE) 231 Column().width('50%').height(30).backgroundColor(0x00FFFF) 232 }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) 233 234 Text('alignItems(Center)').width('90%') 235 Column() { 236 Column().width('50%').height(30).backgroundColor(0xAFEEEE) 237 Column().width('50%').height(30).backgroundColor(0x00FFFF) 238 }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 }) 239 240 // 设置子元素垂直方向的对齐方式 241 Text('justifyContent(Center)').width('90%') 242 Column() { 243 Column().width('90%').height(30).backgroundColor(0xAFEEEE) 244 Column().width('90%').height(30).backgroundColor(0x00FFFF) 245 }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center) 246 247 Text('justifyContent(End)').width('90%') 248 Column() { 249 Column().width('90%').height(30).backgroundColor(0xAFEEEE) 250 Column().width('90%').height(30).backgroundColor(0x00FFFF) 251 }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End) 252 }.width('100%').padding({ top: 5 }) 253 } 254} 255``` 256 257
