Linear Layout (Row/Column)

Overview

Linear layout is the most frequently used layout in development, implemented using the Row or Column linear containers. As the foundation for other layouts, linear layout arranges child elements sequentially along either the horizontal axis (in a Row container) or vertical axis (in a Column container). You can choose between Row and Column containers based on your desired arrangement direction.

NOTE

Excessive component nesting (either too deep a hierarchy or too many nested components) incurs significant performance overhead. For performance purposes, you are advised to remove redundant nodes to simplify the component tree, use layout boundaries to reduce redundant layout calculations, properly apply rendering control syntax and layout component methods to minimize unnecessary re-renders and computations. For details about the best practices, see Layout Optimization.

Figure 1 Child element arrangement in a Column container

arrangement-child-elements-column

Figure 2 Child element arrangement in a Row container

arrangement-child-elements-row

Basic Concepts

Layout container: container component that is able to lay out other elements as its child elements. The layout container calculates the size of its child elements and arranges the layout.
Layout child element: element inside the layout container.
Main axis: axis along which child elements are laid out by default in the linear layout container. The Row container's main axis is horizontal, while the Column container's main axis is vertical. (For details, see Basic Concepts.)
Cross axis: axis that runs perpendicular to the main axis. The Row container's cross axis is vertical, while the Column container's cross axis is horizontal. (For details, see Basic Concepts.)
Spacing: distance between child elements.

Spacing Child Elements Along the Arrangement Direction

In the layout container, use the space attribute to equally distribute child elements along the arrangement direction.

In the Column Container

Figure 3 Layout child element spacing in the arrangement direction in the Column container

arrangement-direction-column

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%')

ColumnLayoutExample.ets

arrangement-direction-column-sample

In the Row Container

Figure 4 Layout child element spacing in the arrangement direction in the Row container

arrangement-direction-row

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%')

RowLayoutExample.ets

en-us_image_0000001562700509

Arranging Child Elements Along the Main Axis

In the layout container, you can use the justifyContent attribute to set the arrangement mode of child elements along the main axis. The arrangement may begin from the start point or end point of the main axis, or the space of the main axis can be evenly divided.

Vertical Alignment of Child Elements in the Column Container

Figure 5 Vertical alignment of child elements in the Column container

vertical-arrangement-child-column

justifyContent(FlexAlign.Start) (default value): The elements are vertically aligned with each other toward the start edge of the container.

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)

ColumnLayoutJustifyContentStart.ets

en-us_image_0000001562700501

justifyContent(FlexAlign.Center): The elements are vertically aligned with each other toward the center of the container. The space between the first component and the start edge is the same as that between the last component and the end edge.

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)

ColumnLayoutJustifyContentCenter.ets

en-us_image_0000001562700517

justifyContent(FlexAlign.End): The elements are vertically aligned with each other toward the end edge of the container.

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)

ColumnLayoutJustifyContentEnd.ets

en-us_image_0000001562940585

justifyContent(FlexAlign.SpaceBetween): The elements are evenly distributed vertically. The space between any two adjacent elements is the same. The first element is aligned with the start edge, the last element is aligned with the end edge, and the remaining elements are distributed so that the space between any two adjacent elements is the same.
```
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)
```
ColumnLayoutJustifyContentSpaceBetween.ets
justifyContent(FlexAlign.SpaceAround): The elements are evenly distributed vertically. The space between any two adjacent elements is the same. The space between the first element and start edge, and that between the last element and end edge are both half the size of the space between two adjacent elements.
```
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)
```
ColumnLayoutJustifyContentSpaceAround.ets

justifyContent(FlexAlign.SpaceEvenly): The elements are evenly distributed vertically. The space between the first element and start edge, the space between the last element and end edge, and the space between any two adjacent elements are the same.

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)

ColumnLayoutJustifyContentSpaceEvenly.ets

en-us_image_0000001563060785

Horizontal Alignment of Child Elements in the Row Container

Figure 6 Horizontal alignment of child elements in the Row container

vertical-arrangement-child-row

justifyContent(FlexAlign.Start) (default value): The elements are horizontally aligned with each other toward the start edge of the container.

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)

RowLayoutJustifyContentStart.ets

en-us_image_0000001511421356

justifyContent(FlexAlign.Center): The elements are horizontally aligned with each other toward the center of the container. The space between the first component and the start edge is the same as that between the last component and the end edge.

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)

RowLayoutJustifyContentCenter.ets

en-us_image_0000001511900516

justifyContent(FlexAlign.End): The elements are horizontally aligned with each other toward the end edge of the container.

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)

RowLayoutJustifyContentEnd.ets

en-us_image_0000001562940601

justifyContent(FlexAlign.SpaceBetween): The elements are evenly distributed horizontally. The space between any two adjacent elements is the same. The first element is aligned with the start edge, the last element is aligned with the end edge, and the remaining elements are distributed so that the space between any two adjacent elements is the same.
```
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)
```
RowLayoutJustifyContentSpaceBetween.ets
justifyContent(FlexAlign.SpaceAround): The elements are evenly distributed horizontally. The space between any two adjacent elements is the same. The space between the first element and start edge, and that between the last element and end edge are both half the size of the space between two adjacent elements.
```
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)
```
RowLayoutJustifyContentSpaceAround.ets

justifyContent(FlexAlign.SpaceEvenly): The elements are evenly distributed horizontally. The space between the first element and start edge, the space between the last element and end edge, and the space between any two adjacent elements are the same.

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)

RowLayoutJustifyContentSpaceEvenly.ets

en-us_image_0000001511421352

Aligning Child Elements Along the Cross Axis

You can use the alignItems attribute to configure the alignment of child elements along the cross axis (perpendicular to the arrangement direction) within the layout container. This alignment remains consistent across screens of different sizes. The value is of the VerticalAlign Type type when the cross axis is in the vertical direction and the HorizontalAlign type when the cross axis is in the horizontal direction.

The layout container also provides the alignSelf attribute to control the alignment mode of a single child element along the cross axis. This attribute has a higher priority than the alignItems attribute. This means that, if alignSelf is set, it will overwrite the alignItems setting on the corresponding child element.

Horizontal Alignment of Child Elements in the Column Container

Figure 7 Horizontal alignment of child elements in the Column container

horizontal-arrangement-child-column

HorizontalAlign.Start: Child elements are left aligned horizontally.

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)')

RowLayoutHorizontalAlignStart.ets

en-us_image_0000001511580964

HorizontalAlign.Center (default value): Child elements are center-aligned horizontally.

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)')

RowLayoutHorizontalAlignCenter.ets

en-us_image_0000001562820897

HorizontalAlign.End: Child elements are right-aligned horizontally.

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)')

RowLayoutHorizontalAlignEnd.ets

en-us_image_0000001511421348

Vertical Alignment of Child Elements in the Row Container

Figure 8 Vertical alignment of child elements in Row container

horizontal-arrangement-child-row

VerticalAlign.Top: Child elements are top-aligned vertically.

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)')

RowLayoutVerticalAlignTop.ets

en-us_image_0000001563060765

VerticalAlign.Center (default value): Child elements are center-aligned vertically.

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)')

RowLayoutVerticalAlignCenter.ets

en-us_image_0000001562700505

VerticalAlign.Bottom: Child elements are bottom-aligned vertically.

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)')

RowLayoutVerticalAlignBottom.ets

en-us_image_0000001563060781

Implementing Adaptive Stretching

In linear layout, adaptive stretching is achieved by using the Blank component, which automatically fills the empty spaces in the container – Row or Column – along the main axis. Just add the width and height as a percentage, and then adaptive scaling will take effect once the screen width and height change.

@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Row() {
        Text('Bluetooth').fontSize(18)
        Blank()
        Toggle({ type: ToggleType.Switch, isOn: true })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
  }
}

BlankExample.ets

Figure 9 Portrait mode (adapts to the screen's narrow edge)

en-us_image_0000001562820881

Figure 10 Landscape mode (adapts to the screen's wide edge)

en-us_image_0000001511421332

Implementing Adaptive Scaling

Adaptive scaling means that the size of a child element is automatically adjusted according to a preset ratio to fit into the container across devices of various screen sizes. In linear layout, adaptive scaling can be achieved using either of the following methods:

When the container size is determined, use layoutWeight to set the weight of a child element during layout. The container space is then allocated along the main axis among the element and sibling elements based on the set layout weight, ignoring the size settings of the elements themselves.

@Entry
@Component
struct LayoutWeightExample {
  build() {
    Column() {
      Text('1:2:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')

      }.backgroundColor(0xffd306).height('30%')

      Text('2:5:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(5)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}

LayoutWeightExample.ets

Figure 11 Landscape mode

en-us_image_0000001511421336

Figure 12 Portrait mode

en-us_image_0000001511580968

When the container size is determined, set the width of a child element in percentage. The container space is then allocated among the element and sibling elements based on the set percentage.

@Entry
@Component
struct WidthExample {
  build() {
    Column() {
      Row() {
        Column() {
          Text('left width 20%')
            .textAlign(TextAlign.Center)
        }.width('20%').backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('center width 50%')
            .textAlign(TextAlign.Center)
        }.width('50%').backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('right width 30%')
            .textAlign(TextAlign.Center)
        }.width('30%').backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}

WidthExample.ets

Figure 13 Landscape mode

en-us_image_0000001563060777

Figure 14 Portrait mode

en-us_image_0000001511740564

Implementing Adaptive Extension

Adaptive extension allows users to drag the scrollbar to access content beyond the visible screen area. This feature is particularly useful when container content exceeds the available screen space. Below are the methods to implement adaptive extension in linear layout:

Add a scrollbar to a List component: If the list items cannot be fully displayed on one screen, you can place the child elements in different components and employ a scrollbar to display them. Use the scrollBar attribute to set the scrollbar status and the edgeEffect attribute to set the rebound effect when the scrollbar has reached the edge.

Use a Scroll component: When one screen is not able to accommodate the full content, you can wrap a Scroll component at the outer layer of the Column or Row component to implement a scrollable linear layout.

Example of using a Scroll component in the vertical layout:

@Entry
@Component
struct ScrollVerticalExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Column() {
        ForEach(this.arr, (item?:number|undefined) => {
          if(item != undefined){
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
          }
        }, (item:number) => item.toString())
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // Vertical scrolling.
    .scrollBar(BarState.On) // The scrollbar is always displayed.
    .scrollBarColor(Color.Gray) // The scrollbar color is gray.
    .scrollBarWidth(10) // The scrollbar width is 10.
    .edgeEffect(EdgeEffect.Spring) // The spring effect is produced when the scrollbar has reached the edge.
  }
}

ScrollVerticalExample.ets

en-us_image_0000001511900524

Example of using a Scroll component in the horizontal layout:

@Entry
@Component
struct ScrollHorizontalExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Row() {
        ForEach(this.arr, (item?:number|undefined) => {
          if(item != undefined){
            Text(item.toString())
              .height('90%')
              .width(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ left: 10 })
          }
        })
      }.height('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Horizontal) // Horizontal scrolling.
    .scrollBar(BarState.On) // The scrollbar is always displayed.
    .scrollBarColor(Color.Gray) // The scrollbar color is gray.
    .scrollBarWidth(10) // The scrollbar width is 10.
    .edgeEffect(EdgeEffect.Spring) // The spring effect is produced when the scrollbar has reached the edge.
  }
}

ScrollHorizontalExample.ets

en-us_image_0000001562940609