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. The…


This content originally appeared on DEV Community and was authored by HarmonyOS

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

a. justifyContent(FlexAlign.Start)

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)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.Start)

b. justifyContent(FlexAlign.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)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.Center)

c. justifyContent(FlexAlign.End)

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)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.End)

d. justifyContent(FlexAlign.SpaceBetween)

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)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.SpaceBetween)

e. justifyContent(FlexAlign.SpaceAround)

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)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.SpaceAround)

f. justifyContent(FlexAlign.SpaceEvenly)

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)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.SpaceEvenly)

Conclusion

Row and Column are essential layout containers in ArkTS. They help developers create flexible and clean user interfaces by arranging elements along the main and cross axes. By using alignment and spacing properties properly, you can make your UI more organized and user-friendly.

References

Row/Column

Written by Sefa Koyuncu


This content originally appeared on DEV Community and was authored by HarmonyOS


Print Share Comment Cite Upload Translate Updates
APA

HarmonyOS | Sciencx (2025-10-24T01:42:44+00:00) Modern UI Design with ArkUI: Linear Layout (Row/Column). Retrieved from https://www.scien.cx/2025/10/24/modern-ui-design-with-arkui-linear-layout-row-column/

MLA
" » Modern UI Design with ArkUI: Linear Layout (Row/Column)." HarmonyOS | Sciencx - Friday October 24, 2025, https://www.scien.cx/2025/10/24/modern-ui-design-with-arkui-linear-layout-row-column/
HARVARD
HarmonyOS | Sciencx Friday October 24, 2025 » Modern UI Design with ArkUI: Linear Layout (Row/Column)., viewed ,<https://www.scien.cx/2025/10/24/modern-ui-design-with-arkui-linear-layout-row-column/>
VANCOUVER
HarmonyOS | Sciencx - » Modern UI Design with ArkUI: Linear Layout (Row/Column). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/10/24/modern-ui-design-with-arkui-linear-layout-row-column/
CHICAGO
" » Modern UI Design with ArkUI: Linear Layout (Row/Column)." HarmonyOS | Sciencx - Accessed . https://www.scien.cx/2025/10/24/modern-ui-design-with-arkui-linear-layout-row-column/
IEEE
" » Modern UI Design with ArkUI: Linear Layout (Row/Column)." HarmonyOS | Sciencx [Online]. Available: https://www.scien.cx/2025/10/24/modern-ui-design-with-arkui-linear-layout-row-column/. [Accessed: ]
rf:citation
» Modern UI Design with ArkUI: Linear Layout (Row/Column) | HarmonyOS | Sciencx | https://www.scien.cx/2025/10/24/modern-ui-design-with-arkui-linear-layout-row-column/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts