ArkUI中的布局组件Row(一)

摘要：本文详细介绍了鸿蒙（HarmonyOS）ArkUI框架中的Row组件核心特性与使用场景。主要内容包括：1）基础布局属性：alignItems控制垂直对齐方式（顶部/居中/底部），justifyContent管理主轴排列，reverse实现子元素顺序反转；2）自适应布局方案：通过Blank组件、layoutWeight权重和百分比设置实现不同屏幕下的拉伸适配；3）延伸布局方案：结合List/S

我叫柱子哥

868人浏览 · 2025-08-09 18:12:10

我叫柱子哥 · 2025-08-09 18:12:10 发布

一、前言

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Row容器内子元素按照水平方向排列，Column容器内子元素按照垂直方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

这篇文章主要介绍Row组件的一些基础知识。

二、核心特性详解

1. 基础用法

1.alignItems

Row中的元素在竖直方向的布局方式。

这里的alignItems是一个VerticalAlign类型的枚举，它有三个值：Top、Center、Bottom，分别表示在竖直方向元素顶部对齐、居中对齐、底部对齐。

图1.顶部对齐

图2.居中对齐

图3.底部对齐

2.justifyContent

Row中的元素在主轴(水平方向)的排列方式。

图4.Row中的元素在主轴方向的排列方式

3.reverse

在鸿蒙（HarmonyOS）的ArkUI框架中，Row组件的reverse属性用于反转子组件的排列顺序，这是一个非常实用的布局功能。以下是详细解析和示例：

默认情况reverse的值为false,子组件按代码书写顺序从左到右排列。

Row() {
  Text('A') // 显示在左侧
  Text('B') // 显示在中间
  Text('C') // 显示在右侧
}

设置reverse的属性为true，子组件按代码书写顺序从右到左排列。

以下面的代码为例：

Row({ reverse: true }) {
  Text('A') // 实际显示在右侧
  Text('B') // 实际显示在中间
  Text('C') // 实际显示在左侧
}

reverse属性在国际化、动态排序等其它场景也经常会用到。

2.自适应

space属性用来设置子组件的间距，支持设置数值和百分比。

1.自适应拉伸

在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。Row和Column作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。

在下面的示例代码中，当屏幕宽度发生变化的时候，Blank会填充中间的空白区域。

@Entry
@Component
struct BlankExample {
build() {
Column() {
Row() {
Text('Bluetooth').fontSize(18)
Blank()
Toggle({ type: ToggleType.Switch, isOn: true })
}.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
}.backgroundColor(0xEFEFEF).padding(20).width('100%')
}
}

2.自适应缩放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。在线性布局中，可以使用以下两种方法实现自适应缩放。

1.父容器确定，子元素填充自适应

父容器尺寸确定时，使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。

以下面的代码为例：

@Entry
@Component
struct layoutWeightExample {
  build() {
    Column() {
      Text('1:2:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')

      }.backgroundColor(0xffd306).height('30%')

      Text('2:5:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(5)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}

图5.横屏

图6.竖屏

3.父容器确定，子元素按照百分比自适应

父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在任意尺寸的设备下保持固定的自适应占比。

@Entry
@Component
struct WidthExample {
  build() {
    Column() {
      Row() {
        Column() {
          Text('left width 20%')
            .textAlign(TextAlign.Center)
        }.width('20%').backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('center width 50%')
            .textAlign(TextAlign.Center)
        }.width('50%').backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('right width 30%')
            .textAlign(TextAlign.Center)
        }.width('30%').backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}

当屏幕发生变化的时候，组件会按照百分比适配。