Chapter 2 UI Component Introduction and Practical Applications (Part 1)
This article will guide you through learning about 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, this guide will help you quickly master the usage of these containers and their property configurations to build efficient and visually appealing user interfaces.
1. Row Container Introduction
A container that lays out children along the horizontal direction.
1.1 Main Axis and Cross Axis Concepts
In the Row container:
- The Main Axis is the horizontal direction, used for arranging child components.
- The Cross Axis is the vertical direction, used for setting 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 Properties
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 Properties
alignItems (sets the alignment of child components on the cross axis):
- VerticalAlign.Top: Top alignment.
- VerticalAlign.Center (default): Center alignment.
- VerticalAlign.Bottom: Bottom alignment.
justifyContent (sets the distribution of child components on the main axis):
- FlexAlign.Start: Arranges near the start of the main axis.
- FlexAlign.Center: Center alignment.
- FlexAlign.End: Arranges near the end of the main axis.
- FlexAlign.SpaceBetween: Distributes child components evenly, with equal spacing between adjacent elements.
- FlexAlign.SpaceAround: Equal spacing between adjacent elements, but the spacing at both ends is half the spacing between adjacent elements.
- FlexAlign.SpaceEvenly: Completely equal spacing between all elements.
::: tip
If the space parameter is set, the justifyContent property will be ignored because space already defines the spacing.
:::
### 1.3 Row Demo Example
```typescript
// 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 of 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 of 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 use of Column and Row components in the ArkUI framework to achieve complex layouts. The code first uses the Column component to set up vertical layout, nesting 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 property, and how to adjust child element alignment in both vertical and horizontal directions through alignItems and justifyContent properties. Each Row component is set with different widths, heights, background colors, and borders to demonstrate the layout effects. 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 properties and parameters, we can easily achieve various horizontal layout requirements. Whether it's simple child component arrangement or complex alignment and distribution methods, the Row container provides 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 developers with another way to build user interfaces.
2.1 Main Axis and Cross Axis Concepts
In the Column container:
- The Main Axis is the vertical direction, used for arranging child components.
- The Cross Axis is the horizontal direction, used for setting the alignment of child components.
- This is exactly opposite to the direction definition of the Row container.
2.2 Column Container Definition and Properties
2.2.1 Column Container Definition
The definition of the Column container is similar to Row, supporting the space parameter to set the spacing between child components:
Column({ space: 10 }) {
Text("Child 1")
Text("Child 2")
}2.2.2 Column Container Properties
alignItems (sets the alignment of child components on the cross axis):
- HorizontalAlign.Start: Start alignment.
- HorizontalAlign.Center (default): Center alignment.
- HorizontalAlign.End: End alignment.
justifyContent (sets the distribution of child components on the main axis):
- The 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 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 use of vertical layout through the Column component in the ArkUI framework, nesting multiple Text and Column components within it. The code first sets the vertical spacing between child elements of the outer Column to 5. Then, through different Column nesting, it demonstrates the effects of alignItems and justifyContent properties. 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). Meanwhile, 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 is set with different widths, heights, background colors, and borders to clearly demonstrate the layout effects. The overall layout width is set to 100%, and top padding is added to make the layout more visually appealing.
2.3 Summary
The Column container is a very important layout method in the ArkUI development framework. By reasonably using its properties and the arrangement of child components, we can easily build various beautiful and practical user interfaces.