第二章 UI组件介绍和实际应用(上)

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

1. Row容器介绍

沿水平方向布局容器。

1.1 主轴与纵轴概念

在 Row 容器中：

主轴是水平方向，用于排列子组件。
纵轴是垂直方向，用于设置子组件的对齐方式。
理解主轴和纵轴有助于我们灵活控制子组件的布局和对齐。

1.2 Row容器的定义与属性

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演示示例

	// xxx.ets
    @Entry
    @Component
    struct RowExample {
    build() {
        Column({ space: 5 }) {
        // 设置子组件水平方向的间距为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 })

        // 设置子元素垂直方向对齐方式
        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 })

        // 设置子元素水平方向对齐方式
        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%')
        }
    }

在这个示例中，以上代码通过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 设置子组件的间距：

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

2.2.2 Column容器的属性

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

HorizontalAlign.Start：起始端对齐。
HorizontalAlign.Center（默认值）：居中对齐。
HorizontalAlign.End：末端对齐。

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

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

2.3 Column容器的使用示例

	// xxx.ets
    @Entry
    @Component
    struct ColumnExample {
    build() {
        Column({ space: 5 }) {
        // 设置子元素垂直方向间距为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 })

        // 设置子元素水平方向对齐方式
        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 })

        // 设置子元素垂直方向的对齐方式
        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 })
        }
    }

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

2.3 总结

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