目录

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.

When nesting multiple components in a complex UI, excessive nesting depth or too many nested components in layout containers will incur additional overhead. It is recommended to optimize performance by removing redundant nodes, using layout boundaries to reduce layout calculations, and properly applying rendering control syntax and layout component methods. For details, see Layout Optimization.

Figure 1 Child element arrangement in a Column container

Figure 2 Child element arrangement in a Row container

Basic Concepts

Spacing Child Elements Along the Arrangement Direction

Inside a layout container, you can use the space attribute of the Row component or the space attribute of the Column component to set the spacing between child elements along the main axis, creating an evenly spaced effect.

[h2]In the Column Container

Figure 3 Layout child element spacing in the arrangement direction in the 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%')

[h2]In the Row Container

Figure 4 Layout child element spacing in the arrangement direction in the 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%')

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.

[h2]Vertical Alignment of Child Elements in the Column Container

Figure 5 Vertical alignment of child elements in the Column container

[h2]Horizontal Alignment of Child Elements in the Row Container

Figure 6 Horizontal alignment of child elements in the Row container

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.

[h2]Horizontal Alignment of Child Elements in the Column Container

Figure 7 Horizontal alignment of child elements in the Column container

[h2]Vertical Alignment of Child Elements in the Row Container

Figure 8 Vertical alignment of child elements in Row container

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

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

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

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:

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: