2 UI 组件-Row 容器介绍

本文将带您学习 ArkUI 框架中的重要线性布局容器——Row，其用于实现水平方向的布局。

2.1 主轴与纵轴概念

在 Row 容器中：

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

2.2 Row 容器的定义与属性

2.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 已定义了间距。

2.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%

2.4 总结

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