02-UI组件介绍和实际应用(上)

本文将带您学习 ArkUI 框架中的两个重要线性布局容器——Row 和 Column，它们分别用于实现水平方向和垂直方向的布局。 通过清晰的示例和简单的讲解，帮助您快速掌握这些容器的使用方法及其属性配置，打造高效且美观的用户界面。

1、Row容器介绍

沿水平方向布局容器。

1.1、主轴与纵轴概念

在 Row 容器中：

  • 主轴 是 水平方向，用于排列子组件。

  • 纵轴 是 垂直方向，用于设置子组件的对齐方式。

  • 理解主轴和纵轴有助于我们灵活控制子组件的布局和对齐。

1.2、 Row容器的定义与属性

1.2.1、 Row容器的定义

Row 容器通过指定可选参数 space，可以设置子组件在水平方向上的间距：

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

space：用于定义子组件之间的间距，支持字符串或数字类型。

1.2.2、Row容器的属性

alignItems（设置子组件在纵轴上的对齐方式）：

  • VerticalAlign.Top：顶部对齐。

  • VerticalAlign.Center（默认值）：居中对齐。

  • VerticalAlign.Bottom：底部对齐。

  • justifyContent（设置子组件在主轴上的分布方式）：

  • FlexAlign.Start：靠近主轴的起点排列。

  • FlexAlign.Center：居中排列。

  • FlexAlign.End：靠近主轴的终点排列。

  • FlexAlign.SpaceBetween：均匀分布子组件，相邻元素之间的间距相等。

  • FlexAlign.SpaceAround：相邻元素间距相等，但两端的间距为相邻元素间距的一半。

  • FlexAlign.SpaceEvenly：所有元素之间的间距完全相等。

小技巧

如果设置了 space 参数，则 justifyContent 属性将被忽略，因为 space 已定义了间距。

1.3、Row演示示例

 1    // xxx.ets
 2    @Entry
 3    @Component
 4    struct RowExample {
 5    build() {
 6        Column({ space: 5 }) {
 7        // 设置子组件水平方向的间距为5
 8        Text('space').width('90%')
 9        Row({ space: 5 }) {
10            Row().width('30%').height(50).backgroundColor(0xAFEEEE)
11            Row().width('30%').height(50).backgroundColor(0x00FFFF)
12        }.width('90%').height(107).border({ width: 1 })
13
14        // 设置子元素垂直方向对齐方式
15        Text('alignItems(Bottom)').width('90%')
16        Row() {
17            Row().width('30%').height(50).backgroundColor(0xAFEEEE)
18            Row().width('30%').height(50).backgroundColor(0x00FFFF)
19        }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
20
21        Text('alignItems(Center)').width('90%')
22        Row() {
23            Row().width('30%').height(50).backgroundColor(0xAFEEEE)
24            Row().width('30%').height(50).backgroundColor(0x00FFFF)
25        }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
26
27        // 设置子元素水平方向对齐方式
28        Text('justifyContent(End)').width('90%')
29        Row() {
30            Row().width('30%').height(50).backgroundColor(0xAFEEEE)
31            Row().width('30%').height(50).backgroundColor(0x00FFFF)
32        }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
33
34        Text('justifyContent(Center)').width('90%')
35        Row() {
36            Row().width('30%').height(50).backgroundColor(0xAFEEEE)
37            Row().width('30%').height(50).backgroundColor(0x00FFFF)
38        }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
39        }.width('100%')
40        }
41    }

在这个示例中，以上代码通过ArkUI框架展示了Column和Row组件的嵌套使用，以实现复杂的布局。 代码首先使用Column组件设置垂直布局，并在其中嵌套了多个Text和Row组件。 Text组件用于显示说明性文本，如“space”、“alignItems(Bottom)”等。Row组件则用于水平布局，展示了如何通过space属性设置子组件间距，以及通过alignItems和justifyContent属性调整子元素在垂直和水平方向上的对齐方式。 每个Row组件都设置了不同的宽度、高度、背景色和边框，以展示布局效果。整体布局宽度设置为100%

1.4、总结

Row容器是ArkUI开发框架中一种非常实用的线性布局容器。通过灵活使用它的属性和参数，我们可以轻松实现各种水平方向的布局需求。无论是简单的子组件排列还是复杂的对齐和分布方式，Row容器都能提供强大的支持。

2、Column容器介绍

在ArkUI开发框架中，Column容器是一种用于实现竖直方向布局的线性容器。与Row容器不同，Column容器将子组件按照竖直方向进行排列，为开发者提供了另一种构建用户界面的方式。

2.1、主轴与纵轴概念

在 Column 容器中：

  • 主轴 是 竖直方向，用于排列子组件。

  • 纵轴 是 水平方向，用于设置子组件的对齐方式。

  • 这与 Row 容器的方向定义正好相反。

2.2、 Column容器的定义与属性

2.2.1、 Column容器的定义

Column 容器的定义方式与 Row 类似，支持通过参数 space 设置子组件的间距：

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

2.2.2、Column容器的属性

alignItems（设置子组件在纵轴上的对齐方式）：

  • HorizontalAlign.Start：起始端对齐。

  • HorizontalAlign.Center（默认值）：居中对齐。

  • HorizontalAlign.End：末端对齐。

justifyContent（设置子组件在主轴上的分布方式）：

  • 适用的值与 Row 容器一致，如 FlexAlign.Center、FlexAlign.End 等。

2.3、Column容器的使用示例

 1        // xxx.ets
 2        @Entry
 3        @Component
 4        struct ColumnExample {
 5        build() {
 6            Column({ space: 5 }) {
 7            // 设置子元素垂直方向间距为5
 8            Text('space').width('90%')
 9            Column({ space: 5 }) {
10                Column().width('100%').height(30).backgroundColor(0xAFEEEE)
11                Column().width('100%').height(30).backgroundColor(0x00FFFF)
12            }.width('90%').height(100).border({ width: 1 })
13
14            // 设置子元素水平方向对齐方式
15            Text('alignItems(Start)').width('90%')
16            Column() {
17                Column().width('50%').height(30).backgroundColor(0xAFEEEE)
18                Column().width('50%').height(30).backgroundColor(0x00FFFF)
19            }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
20
21            Text('alignItems(End)').width('90%')
22            Column() {
23                Column().width('50%').height(30).backgroundColor(0xAFEEEE)
24                Column().width('50%').height(30).backgroundColor(0x00FFFF)
25            }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
26
27            Text('alignItems(Center)').width('90%')
28            Column() {
29                Column().width('50%').height(30).backgroundColor(0xAFEEEE)
30                Column().width('50%').height(30).backgroundColor(0x00FFFF)
31            }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
32
33            // 设置子元素垂直方向的对齐方式
34            Text('justifyContent(Center)').width('90%')
35            Column() {
36                Column().width('90%').height(30).backgroundColor(0xAFEEEE)
37                Column().width('90%').height(30).backgroundColor(0x00FFFF)
38            }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
39
40            Text('justifyContent(End)').width('90%')
41            Column() {
42                Column().width('90%').height(30).backgroundColor(0xAFEEEE)
43                Column().width('90%').height(30).backgroundColor(0x00FFFF)
44            }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
45            }.width('100%').padding({ top: 5 })
46            }
47        }

在这个示例中，以上代码通过ArkUI框架的Column组件展示了垂直布局的使用，并在其中嵌套了多个Text和Column组件。 代码首先设置了外层Column的子元素垂直方向间距为5。接着，通过不同的Column嵌套展示了alignItems和justifyContent属性的效果。 alignItems用于设置子元素在水平方向上的对齐方式，分别展示了Start（左对齐）、End（右对齐）和Center（居中对齐）的效果。 而justifyContent则用于设置子元素在垂直方向上的对齐方式，展示了Center（居中对齐）和End（底部对齐）的效果。 每个Column组件都设置了不同的宽度、高度、背景色和边框，以清晰地展示布局效果。 整体布局宽度设置为100%，并添加了顶部内边距，使布局更加美观。

2.2、总结

Column容器是ArkUI开发框架中一种非常重要的布局方式。通过合理使用其属性和子组件的排列方式，我们可以轻松地构建出各种美观且实用的用户界面。