2 UI Component - Row Container Introduction

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

2.1 Main Axis and Cross Axis Concepts

In the Row container:

• The main axis is the horizontal direction, used to arrange child components.
• The cross axis is the vertical direction, used to set the alignment of child components.
• Understanding the main axis and cross axis helps us flexibly control the layout and alignment of child components.

2.2 Definition and Properties of Row Container

2.2.1 Definition of Row Container

The Row container can set the spacing between child components in the horizontal direction by specifying the optional parameter space:

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

space: Used to define the spacing between child components, supporting string or number types.

2.2.2 Properties of Row Container

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

• VerticalAlign.Top: Top alignment.
• VerticalAlign.Center (default value): Center alignment.
• VerticalAlign.Bottom: Bottom alignment.

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

• FlexAlign.Start: Arranged near the start point of the main axis.
• FlexAlign.Center: Center arrangement.
• FlexAlign.End: Arranged near the end point of the main axis.
• FlexAlign.SpaceBetween: Child components are evenly distributed, with equal spacing between adjacent elements.
• FlexAlign.SpaceAround: Adjacent element spacing is equal, but the spacing at both ends is half the spacing between adjacent elements.
• FlexAlign.SpaceEvenly: The spacing between all elements is completely equal.

Tips

If the space parameter is set, the justifyContent property will be ignored because space already defines the spacing.

2.3 Row Demonstration Example

// xxx.ets
@Entry
@Component
struct RowExample {
  build() {
    Column({ space: 5 }) {
      // Set horizontal spacing between child components to 5
      Text('space').width('90%')
      Row({ space: 5 }) {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').height(107).border({ width: 1 })

      // Set vertical alignment of child elements
      Text('alignItems(Bottom)').width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })

      Text('alignItems(Center)').width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })

      // Set horizontal alignment of child elements
      Text('justifyContent(End)').width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)

      Text('justifyContent(Center)').width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
    }.width('100%')
  }
}

In this example, the above code demonstrates the nested use of Column and Row components through the ArkUI framework to achieve complex layouts. The code first uses the Column component to set vertical layout and nests multiple Text and Row components within it. The Text component is used to display explanatory text, such as "space", "alignItems(Bottom)", etc. The Row component is used for horizontal layout, demonstrating how to set child component spacing through the space property and how to adjust the alignment of child elements in vertical and horizontal directions through alignItems and justifyContent properties. Each Row component sets different widths, heights, background colors, and borders to demonstrate the layout effect. The overall layout width is set to 100%.

2.4 Summary

The Row container is a very practical linear layout container in ArkUI development framework. By flexibly using its properties and parameters, we can easily achieve various horizontal layout requirements. Whether it's simple child component arrangement or complex alignment and distribution methods, the Row container can provide powerful support.