3 UI Component - Column Container Introduction

This article will take you to learn about the important linear layout container in the ArkUI framework —— Column, which is used to implement vertical layout.

3.1 Main Axis and Cross Axis Concepts

In the Column container:

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

3.2 Definition and Properties of Column Container

3.2.1 Definition of Column Container

The definition method of the Column container is similar to Row, supporting setting the spacing between child components through the space parameter:

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

3.2.2 Properties of Column Container

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

• HorizontalAlign.Start: Start alignment.
• HorizontalAlign.Center (default value): Center alignment.
• HorizontalAlign.End: End alignment.

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

• The applicable values are consistent with the Row container, such as FlexAlign.Center, FlexAlign.End, etc.

3.3 Usage Example of Column Container

// xxx.ets
@Entry
@Component
struct ColumnExample {
  build() {
    Column({ space: 5 }) {
      // Set vertical spacing between child elements 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 horizontal alignment of child elements
      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 vertical alignment of child elements
      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 demonstrates the use of vertical layout through the Column component of the ArkUI framework, nesting multiple Text and Column components within it. The code first sets the vertical spacing between child elements of the outer Column to 5. Then, different Column nesting demonstrates the effects of alignItems and justifyContent properties. alignItems is used to set the horizontal alignment of child elements, demonstrating the effects of Start (left alignment), End (right alignment), and Center (center alignment). justifyContent is used to set the vertical alignment of child elements, demonstrating the effects of Center (center alignment) and End (bottom alignment). Each Column component sets different widths, heights, background colors, and borders to clearly demonstrate the layout effect. The overall layout width is set to 100%, and top 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 properties and the arrangement of child components, we can easily build various beautiful and practical user interfaces.