HarmonyOS

Posted on Aug 26

Modern UI Design with ArkUI: Linear Layout (Row/Column)

Read the original article：Modern UI Design with ArkUI: Linear Layout (Row/Column)

Introduction

In UI design, arranging elements on the screen is one of the most important steps. ArkTS provides two basic linear layout containers: Row and Column. These containers help you align and position elements either horizontally or vertically.

In this article, we’ll explore the basic properties and usage of the Row and Column components. Let’s learn how to use them effectively.

📍 What Is a Linear Layout?

Row and Column are both linear layout containers.

Row arranges child components horizontally (from left to right).
Column arranges them vertically (from top to bottom).
They are essential for building clean and readable user interfaces.

📍 Main Axis vs Cross Axis

Understanding layout direction is important.

Main axis: The primary direction of the layout

Row → horizontal
Column → vertical
Cross-axis: The opposite direction
Row → vertical
Column → horizontal
These directions affect how you align and space your components.

📍 Spacing Between Components

Use the space attribute to create equal spacing between items.

In a Row, space is distributed from left to right
In a Column, space is distributed from top to bottom
It helps your layout look cleaner and better structured.

In Column Container

Column({ space: 20 }) {
  Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  Row().width('90%').height(50).backgroundColor(0xD2B48C)
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
}.width('100%')

In Row Container

Row({ space: 35 }) {
  Text('space: 35').fontSize(15).fontColor(Color.Gray)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  Row().width('10%').height(150).backgroundColor(0xD2B48C)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
}.width('90%')

📍 Aligning Elements on the Cross Axis

To align all children along the cross axis, use the alignItems property.

The value is of the VerticalAlign type when the cross axis is in the vertical direction and the HorizontalAlign type when the cross axis is in the horizontal direction.

To override alignment for a single item, use alignSelf.

1. Horizontal Alignment of Child Elements in Column Container

a. HorizontalAlign.Start

Column() 
{
  Column() {
  }
  .width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }
  .width('80%').height(50).backgroundColor(0xF5DEB3)
}
.width('100%').alignItems(HorizontalAlign.Start)
.backgroundColor('rgb(242,242,242)')

b. HorizontalAlign.Center

Column() 
{
  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.alignItems(HorizontalAlign.Center)
.backgroundColor('rgb(242,242,242)')

c. HorizontalAlign.End

Column() {
  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.alignItems(HorizontalAlign.End)
.backgroundColor('rgb(242,242,242)')

2. Vertical Alignment of Child Elements in Row Container

a. VerticalAlign.Top

Row() 
{
  Column() {
  }
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('20%')
  .height(30)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(200)
.alignItems(VerticalAlign.Top)
.backgroundColor('rgb(242,242,242)')

b. VerticalAlign.Center

Row() 
{
  Column() {
  }
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('20%')
  .height(30)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(200)
.alignItems(VerticalAlign.Center)
.backgroundColor('rgb(242,242,242)')

c. VerticalAlign.Bottom

Row() 
{
  Column() {
  }
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('20%')
  .height(30)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(200)
.alignItems(VerticalAlign.Bottom)
.backgroundColor('rgb(242,242,242)')

📍 Aligning Elements on the Main Axis

To align children on the main axis, use justifyContent.

You can arrange them like this:

FlexAlign.Start
FlexAlign.Center
FlexAlign.End
FlexAlign.SpaceBetween
FlexAlign.SpaceAround
FlexAlign.SpaceEvenly
Works in both Row and Column.

1. Vertical Alignment of Child Elements in Column Container

a. justifyContent(FlexAlign.Start)

Column() 
{
  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(300)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.Start)

b. justifyContent(FlexAlign.Center)

Column() 
{
  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(300)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.Center)

c. justifyContent(FlexAlign.End)

Column() 
{
  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(300)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.End)

d. justifyContent(FlexAlign.SpaceBetween)

Column() 
{
  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(300)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.SpaceBetween)

e. justifyContent(FlexAlign.SpaceAround)

Column() 
{
  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(300)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.SpaceAround)

f. justifyContent(FlexAlign.SpaceEvenly)

Column() 
{
  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xD2B48C)

  Column() {
  }
  .width('80%')
  .height(50)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(300)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.SpaceEvenly)

2. Horizontal Alignment of Child Elements in Row Container