Chapter 2 Introduction to UI Components and Practical Applications (Part 1)

This article will guide you through two essential linear layout containers in the ArkUI framework—Row and Column—which are designed for horizontal and vertical layout arrangements respectively. Through clear examples and concise explanations, you'll quickly master the usage of these containers and their property configurations, enabling you to build efficient and visually appealing user interfaces.

1. Introduction to Row Container

A container that arranges elements horizontally.

1.1 Main Axis and Cross Axis Concepts

In a Row container:

  • The main axis runs horizontally and is used to arrange child components.

  • The cross axis runs vertically and determines the alignment of child components.

  • Understanding the main axis and cross axis helps us flexibly control the layout and alignment of child components.

1.2 Definition and Properties of Row Container

1.2.1 Definition of Row Container

By specifying the optional parameter space, the Row container allows you to configure the horizontal spacing between child components.

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

space：Defines the spacing between child components and supports string or numeric values.

1.2.2 Properties of Row Container

alignItems（Configures the vertical alignment of child components along the cross axis.）：

  • VerticalAlign.Top: Aligns child components to the top of the container.
  • VerticalAlign.Center (default): Vertically centers child components within the container.
  • VerticalAlign.Bottom: Aligns child components to the bottom edge of the container.
  • justifyContent (sets the distribution of child components along the main axis):
  • FlexAlign.Start: Positions child components close to the start of the main axis (e.g., left in LTR layouts or top in vertical layouts).
  • FlexAlign.Center: Centers child components along the main axis (defined by the direction property, e.g., horizontally in row layouts or vertically in column layouts).
  • FlexAlign.End: Positions child components close to the end of the main axis (e.g., right in LTR layouts or bottom in vertical layouts defined by the direction property).
  • FlexAlign.SpaceBetween: Evenly distributes child components along the main axis with equal spacing between adjacent elements, while aligning the first and last elements to the container edges.
  • FlexAlign.SpaceAround: Evenly distributes child components along the main axis with equal spacing around each element, resulting in half the spacing between the first/last element and the container edges compared to the spacing between adjacent elements.
  • FlexAlign.SpaceEvenly: Evenly distributes child components along the main axis with equal spacing between all elements, including the start and end edges of the container.

Tips

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

1.3 Row Layout 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 mode for 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 mode for 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 code demonstrates the nested usage of Column and Row components via the ArkUI framework to achieve complex layouts. The code first configures a vertical layout using the Column component, within which multiple Text and Row components are nested. The Text components display descriptive labels such as 'space', 'alignItems(Bottom)', etc. The Row components, used for horizontal layouts, showcase how to set spacing between child components through the space property and adjust vertical/horizontal alignment of child elements via alignItems and justifyContent properties. Each Row component is styled with distinct width, height, background color, and borders to visualize the layout effects. The overall layout width is set to 100%

1.4 Summary

The Row container is a highly practical linear layout container in the ArkUI development framework. By flexibly utilizing its properties and parameters, we can easily achieve various horizontal layout requirements. Whether for simple child component arrangements or complex alignment and distribution methods, the Row container provides robust support.

2. Introduction to Column Containers

In the ArkUI development framework, the Column container is a linear container used to implement vertical layouts. Unlike the Row container, the Column container arranges child components in a vertical direction, providing developers with an alternative approach to structuring user interfaces.

2.1 Main Axis and Cross Axis Concepts

In Column containers:

  • The main axis is the vertical direction, used to arrange child components.
  • The cross axis is the horizontal direction, used to set the alignment of child components.
  • This orientation is the exact opposite of Row containers, where the main axis is horizontal and the cross axis is vertical.

2.2 Definition and Properties of Column Containers

2.2.1 Definition of Column Containers

Column containers are defined similarly to Row containers, supporting the configuration of spacing between child components through a space parameter.

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

2.2.2 Properties of Column Containers

alignItems (Controls the alignment of child components along the cross axis, which corresponds to the horizontal direction in Column containers):

  • HorizontalAlign.Start: Aligns content to the start of the container (typically the left side in left-to-right layouts).
  • HorizontalAlign.Center (default): Centers the content horizontally within the container.
  • HorizontalAlign.End: Aligns content to the end of the container (typically the right side in left-to-right layouts, or the left side in right-to-left layouts).

justifyContent (Controls the distribution of child components along the main axis, which corresponds to the vertical direction in Column containers and the horizontal direction in Row containers):

  • The applicable values are the same as those for the Row container, such as FlexAlign.Center, FlexAlign.End, etc.

2.3 Example of Column Container Usage

	// xxx.ets
    @Entry
    @Component
    struct ColumnExample {
    build() {
        Column({ space: 5 }) {
        // Set vertical spacing between child elements to 5
        Text('space').width('90%')
        Column({ space: 5 }) {
            Column().width('100%').height(30).backgroundColor(0xAFEEEE)
            Column().width('100%').height(30).backgroundColor(0x00FFFF)
        }.width('90%').height(100).border({ width: 1 })

        // Set horizontal alignment of child elements
        Text('alignItems(Start)').width('90%')
        Column() {
            Column().width('50%').height(30).backgroundColor(0xAFEEEE)
            Column().width('50%').height(30).backgroundColor(0x00FFFF)
        }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })

        Text('alignItems(End)').width('90%')
        Column() {
            Column().width('50%').height(30).backgroundColor(0xAFEEEE)
            Column().width('50%').height(30).backgroundColor(0x00FFFF)
        }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })

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

        // Set vertical alignment of child elements
        Text('justifyContent(Center)').width('90%')
        Column() {
            Column().width('90%').height(30).backgroundColor(0xAFEEEE)
            Column().width('90%').height(30).backgroundColor(0x00FFFF)
        }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)

        Text('justifyContent(End)').width('90%')
        Column() {
            Column().width('90%').height(30).backgroundColor(0xAFEEEE)
            Column().width('90%').height(30).backgroundColor(0x00FFFF)
        }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
        }.width('100%').padding({ top: 5 })
        }
    }

In this example, the code demonstrates the usage of vertical layout through ArkUI's Column component, nesting multiple Text and Column components. The code first sets the vertical spacing between child elements of the outer Column to 5. It then showcases the effects of the alignItems and justifyContent properties through nested Column structures. The alignItems property controls horizontal alignment of child elements, demonstrating Start (left-aligned), End (right-aligned), and Center (centered) configurations. The justifyContent property controls vertical alignment, showcasing Center (vertically centered) and End (bottom-aligned) configurations. Each Column component is styled with distinct width, height, background color, and borders to clearly highlight the layout effects. The overall layout width is set to 100%, with added top padding to enhance visual presentation.

2.3 Summary

The Column component is a crucial layout method in the ArkUI development framework. By appropriately utilizing its properties and arranging child components, developers can effortlessly construct various visually appealing and functional user interfaces.