harmony 鸿蒙Column

  • 2025-06-12
  • 浏览 (4)

Column

The Column component lays out child components vertically.

NOTE

This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Supported

APIs

Column

Column(options?: ColumnOptions)

Creates a vertical linear layout container. You can set the spacing between child components, which can be of type number or string.

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
options ColumnOptions No Vertical spacing between two adjacent child components.

Column16+

Column(options?: ColumnOptions|ColumnOptionsV2)

Creates a vertical linear layout container. You can set the spacing between child components, which can be of type number, string, or Resource.

Widget capability: This API can be used in ArkTS widgets since API version 16.

Atomic service API: This API can be used in atomic services since API version 16.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
options ColumnOptions |ColumnOptionsV2 No Vertical spacing between two adjacent child components.

ColumnOptions14+

Defines the spacing properties for child components used for constructing a Column component.

Widget capability: This API can be used in ArkTS widgets since API version 14.

Atomic service API: This API can be used in atomic services since API version 14.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Mandatory Description
space string |number No Vertical spacing between two adjacent child components.
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
Default value: 0
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.

ColumnOptionsV216+

Defines the spacing properties for child components used for constructing a Column component.

Widget capability: This API can be used in ArkTS widgets since API version 16.

Atomic service API: This API can be used in atomic services since API version 16.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Mandatory Description
space SpaceType No Vertical spacing between two adjacent child components.
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.
Default value: 0, in vp
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.

SpaceType16+

type SpaceType = number|string|Resource

Describes 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.

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.

Atomic service API: This API can be used in atomic services since API version 16.

Attributes

In addition to the universal attributes, the following attributes are supported.

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

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

NOTE

During column layout, child components do not shrink if 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.

reverse12+

reverse(isReversed: Optional<boolean>)

Sets whether to reverse the arrangement of child components on the main axis (vertical direction).

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 arrangement of child components on the main axis (vertical direction).
Default value: true

NOTE

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.

Events

The universal events are supported.

Example

This example demonstrates how to set horizontal layout properties, such as spacing and alignment, using the Column component.

// resources/base/element/string.json
{
  "string": [
    {
      "name": "stringSpace",
      "value": "5"
    }
  ]
}

// xxx.ets
@Entry
@Component
struct ColumnExample {
  build() {
    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 })
  }
}

column

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙Dialog Box (Dialog)

harmony 鸿蒙DialogV2

harmony 鸿蒙DownloadFileButton

0  赞
  • 所属分类： 后端技术
  • 本文标签：
  • 版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/RA86Vn
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录