UI Components - Column Container Introduction

This article will take you through Column, an important linear-layout container in the ArkUI framework, used to implement layout in the vertical direction.

3.1 Main Axis and Cross Axis Concepts

In the Column container:

• The main axis is vertical, used to arrange child components.
• The cross axis is horizontal, used to set the alignment of child components.
• This is exactly the opposite of the Row container's direction definitions.

3.2 Definition and Attributes of the Column Container

3.2.1 Definition of the Column Container

The Column container is defined similarly to Row, and supports setting the spacing of child components via the parameter space:

Column({ space: 10 }) {
  Text("Child 1")
  Text("Child 2")
}

3.2.2 Attributes of the Column Container

alignItems (sets the alignment of child components on the cross axis):

• HorizontalAlign.Start: start-edge aligned.
• HorizontalAlign.Center (default): center-aligned.
• HorizontalAlign.End: end-edge aligned.

justifyContent (sets the distribution of child components on the main axis):

• The applicable values are the same as those of the Row container, such as FlexAlign.Center, FlexAlign.End, etc.

3.3 Column Container Usage Example

// xxx.ets
@Entry
@Component
struct ColumnExample {
  build() {
    Column({ space: 5 }) {
      // 设置子元素垂直方向间距为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 })

      // 设置子元素水平方向对齐方式
      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 })

      // 设置子元素垂直方向的对齐方式
      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 })
  }
}

In this example, the above code shows the usage of vertical layout through the ArkUI framework's Column component, and nests multiple Text and Column components inside. The code first sets the vertical spacing of the outer Column's child elements to 5. Then, through different Column nesting, it demonstrates the effects of the alignItems and justifyContent attributes. alignItems is used to set the horizontal alignment of child elements, showing the effects of Start (left-aligned), End (right-aligned), and Center (center-aligned). justifyContent is used to set the vertical alignment of child elements, showing the effects of Center (center-aligned) and End (bottom-aligned). Each Column component has different width, height, background color, and border set to clearly show the layout effect. The overall layout width is set to 100%, and a top inner padding is added to make the layout more aesthetically pleasing.

3.4 Summary

The Column container is a very important layout method in the ArkUI development framework. By reasonably using its attributes and the arrangement of child components, we can easily build a variety of beautiful and practical user interfaces.