UI Components - Row Container Introduction

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

2.1 Main Axis and Cross Axis Concepts

In the Row container:

• The main axis is horizontal, used to arrange child components.
• The cross axis is vertical, 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 Attributes of the Row Container

2.2.1 Definition of the Row Container

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

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

space: used to define the spacing between child components; supports string or number type.

2.2.2 Attributes of the Row Container

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

• VerticalAlign.Top: top-aligned.
• VerticalAlign.Center (default): center-aligned.
• VerticalAlign.Bottom: bottom-aligned.
• justifyContent (sets the distribution of child components on the main axis):
• FlexAlign.Start: arrange near the start of the main axis.
• FlexAlign.Center: arrange in the center.
• FlexAlign.End: arrange near the end of the main axis.
• FlexAlign.SpaceBetween: distribute child components evenly with equal spacing between adjacent elements.
• FlexAlign.SpaceAround: equal spacing between adjacent elements, but the spacing at both ends is half of the spacing between adjacent elements.
• FlexAlign.SpaceEvenly: the spacing between all elements is completely equal.

Tips

If the space parameter is set, the justifyContent attribute will be ignored because space has already defined the spacing.

2.3 Row Demo Example

// xxx.ets
@Entry
@Component
struct RowExample {
  build() {
    Column({ space: 5 }) {
      // 设置子组件水平方向的间距为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 })

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

      // 设置子元素水平方向对齐方式
      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 shows the nested usage of Column and Row components through the ArkUI framework to implement a complex layout. The code first uses a Column component to set up a vertical layout, and nests multiple Text and Row components inside it. The Text components are used to display explanatory text such as "space", "alignItems(Bottom)", etc. The Row components are used for horizontal layout, demonstrating how to set child component spacing through the space attribute, and how to adjust the alignment of child elements in the vertical and horizontal directions through the alignItems and justifyContent attributes. Each Row component has different width, height, background color, and border set to show 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 the ArkUI development framework. By flexibly using its attributes and parameters, we can easily implement a variety of horizontal layout requirements. Whether it is a simple child-component arrangement or a complex alignment and distribution, the Row container can provide powerful support.