Chapter 2 UI Component Introduction and Practical Applications (Part 1)

This article will take you through learning two important linear layout containers in the ArkUI framework - Row and Column, which are used to implement horizontal and vertical layouts respectively. Through clear examples and simple explanations, it will help you quickly master the usage methods and attribute configurations of these containers to create efficient and beautiful user interfaces.

1. Row Container Introduction

Container layout along the horizontal direction.

1.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.

1.2 Row Container Definition and Attributes

1.2.1 Row Container Definition

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.

1.2.2 Row Container Attributes

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

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

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

• FlexAlign.Start: Arrange near the start point of the main axis.
• FlexAlign.Center: Center arrangement.
• FlexAlign.End: Arrange near the end point 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 adjacent element spacing.
• FlexAlign.SpaceEvenly: Completely equal spacing between all elements.

Tips

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

1.3 Row Demo Example

	// xxx.ets
    @Entry
    @Component
    struct RowExample {
    build() {
        Column({ space: 5 }) {
        // Set child component horizontal direction spacing 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 child element vertical direction alignment
        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 child element horizontal direction alignment
        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 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. Text components are used to display explanatory text such as "space", "alignItems(Bottom)", etc. Row components are used for horizontal layout, demonstrating how to set child component spacing through the space attribute and adjust child element alignment in vertical and horizontal directions through alignItems and justifyContent attributes. Each Row component sets different width, height, background color, and border to demonstrate the layout effect. The overall layout width is set to 100%.

1.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 various horizontal layout requirements. Whether it's simple child component arrangement or complex alignment and distribution methods, the Row container can provide powerful support.

2. Column Container Introduction

In the ArkUI development framework, the Column container is a linear container used to implement vertical layout. Unlike the Row container, the Column container arranges child components in the vertical direction, providing another way for developers to build user interfaces.

2.1 Main Axis and Cross Axis Concepts

In the Column container:

• The main axis is the vertical direction, used to arrange child components.
• This is exactly opposite to the direction definition of the Row container.
• The cross axis is the horizontal direction, used to set the alignment of child components.

2.2 Column Container Definition and Attributes

2.2.1 Column Container Definition

The definition method of the Column container is similar to Row. It supports setting the spacing between child components through the parameter space:

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

2.2.2 Column Container Attributes

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

• HorizontalAlign.Start: Start alignment.
• HorizontalAlign.Center (default): Center alignment.
• HorizontalAlign.End: End alignment.

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

• Applicable values are consistent with the Row container, such as FlexAlign.Center, FlexAlign.End, etc.

2.3 Column Container Usage Example

	// xxx.ets
    @Entry
    @Component
    struct ColumnExample {
    build() {
        Column({ space: 5 }) {
        // Set child element vertical direction spacing 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 child element horizontal direction alignment
        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 child element vertical direction alignment
        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 above code demonstrates the use of vertical layout through the Column component of the ArkUI framework, nesting multiple Text and Column components within it. The code first sets the child element vertical direction spacing of the outer Column to 5. Then, through different Column nesting, it demonstrates the effects of alignItems and justifyContent attributes. alignItems is used to set the alignment of child elements in the horizontal direction, demonstrating the effects of Start (left alignment), End (right alignment), and Center (center alignment). justifyContent is used to set the alignment of child elements in the vertical direction, demonstrating the effects of Center (center alignment) and End (bottom alignment). Each Column component sets different width, height, background color, and border to clearly demonstrate the layout effect. The overall layout width is set to 100%, with top padding added to make the layout more beautiful.

2.3 Summary

The Column container is a very important layout method in the ArkUI development framework. By reasonably using its attributes and child component arrangement methods, we can easily build various beautiful and practical user interfaces.

---