摘要

线性布局是 ArkUI 界面搭建最基础的容器组件，Row 作为水平横向布局容器，承担页面导航、功能按钮栏、表单行、图文并排等绝大多数横向排版场景，具备间距控制、对齐方式、权重分配、自适应填充、嵌套组合等丰富能力，API 简洁、渲染性能高效。OpenHarmony 应用开发中大量页面存在 Row 使用不规范问题：权重分配错乱、内容溢出、多端屏幕适配失效、对齐逻辑混乱、嵌套层级冗余等，直接造成界面错位、布局卡顿。本文基于 DevEco Studio 标准 ArkTS 开发环境，系统拆解 Row 核心属性、布局约束规则、权重自适应原理，结合导航栏、表单、操作按钮栏、图文卡片四大业务实战案例，给出多屏幕适配方案与性能优化手段，汇总 Row 高频踩坑问题与修复方案，为 OpenHarmony 界面规范化开发提供完整实操参考。

关键词

OpenHarmony；ArkUI；Row 横向布局；线性布局；layoutWeight；界面适配；UI 性能优化

一、引言

1.1 Row 组件开发背景

ArkUI 声明式 UI 框架提供两大基础线性容器：Column 纵向布局、Row 横向布局，二者是所有复杂页面的底层布局基石。Row 负责将子组件沿水平方向依次排列，广泛应用于顶部导航、底部操作栏、登录表单输入行、商品图文条目、功能快捷按钮等页面模块，几乎每一页应用都会高频使用 Row 组件。

开发者在使用 Row 时常出现诸多布局缺陷：未设置 layoutWeight 导致小屏内容横向溢出、justifyContent 与 alignItems 对齐概念混淆、space 间距适配不同屏幕失效、多层 Row 嵌套造成渲染性能损耗、忽略权重分配优先级导致自适应错乱。OpenHarmony 覆盖手机、平板、智慧屏多终端设备，屏幕宽度差异极大，不规范的 Row 写法会直接导致多端界面显示不一致，严重影响交互体验。因此系统掌握 Row 完整能力、标准化横向布局写法，是鸿蒙 UI 开发必备基础技能。

1.2 开发环境与测试场景

开发工具：DevEco Studio 5.0 运行平台：OpenHarmony 标准系统模拟器、鸿蒙手机真机 开发语言：ArkTS（ArkUI 声明式范式） 核心组件：Row 容器、Text、Button、TextInput、Image、layoutWeight 权重布局 测试场景：顶部导航布局、表单单行布局、底部双按钮操作栏、图文并排卡片、多组件自适应均分布局

二、Row 组件核心基础概念与属性详解

2.1 Row 基础构造参数

Row 构造函数支持传入 space 参数，统一控制内部所有子组件横向间距，语法格式：Row({ space: 数值 })，单位 vp，适配多屏幕像素密度。

ets

Row({ space: 15 }) {
  Text("选项1")
  Text("选项2")
  Text("选项3")
}

2.2 两大对齐核心属性

1. justifyContent：控制水平方向子组件整体排布方式

• FlexAlign.Start：左对齐（默认）
• FlexAlign.Center：水平居中
• FlexAlign.End：右对齐
• FlexAlign.SpaceBetween：两端贴边，组件间自动均分剩余空间
• FlexAlign.SpaceAround：组件两侧均分留白
• FlexAlign.SpaceEvenly：所有间距完全均等

1. alignItems：控制垂直方向子组件对齐方式

• ItemAlign.Center：垂直居中（最常用）
• ItemAlign.Start：顶部对齐
• ItemAlign.End：底部对齐
• ItemAlign.Stretch：子组件高度自动拉伸填满 Row 高度

2.3 layoutWeight 自适应权重（核心适配能力）

Row 内子组件添加.layoutWeight(数值)，组件会按照权重比例瓜分 Row 剩余横向空间，解决多屏幕宽度自适应、内容溢出问题。无固定宽度、搭配百分比宽高，是多端适配核心方案。 规则：权重仅分配 Row 扣除子组件固定宽后的剩余空间；同一行多个组件设置权重，宽度按权重比值分配。

2.4 补充通用约束属性

• width/height：设置 Row 容器整体宽高，支持固定 vp、百分比、自适应 wrap_content
• padding/margin：容器内外边距，隔离页面边界
• overflow：子组件超出容器时处理方式（隐藏 / 滚动 / 可见）

三、Row 基础规范示例代码

3.1 基础横向均分导航栏

ets

@Entry
@Component
struct RowBaseDemo {
  build() {
    Column() {
      Row({ space: 0 }) {
        Text("首页")
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
          .height(50)
        Text("分类")
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
          .height(50)
        Text("购物车")
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
        Text("我的")
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
      }
      .width("100%")
      .backgroundColor("#007DFF")
    }
    .width("100%")
    .height("100%")
  }
}

3.2 左右分布表单单行布局

ets

@Entry
@Component
struct RowFormDemo {
  @State account: string = ""
  build() {
    Column({ space: 20 }) {
      Row({ space: 12 }) {
        Text("账号：")
          .width(60)
          .fontSize(16)
        TextInput({ placeholder: "请输入账号", text: this.account })
          .layoutWeight(1)
          .height(45)
      }
      .width("100%")
      .padding({ left: 10, right: 10 })
    }
    .padding(20)
  }
}

四、四大业务场景完整实战案例

4.1 实战一：页面顶部导航 Row 布局

业务需求：左侧返回按钮、中间标题、右侧功能图标，三部分左右分布，中间标题自适应留白。

ets

@Entry
@Component
struct NavRowDemo {
  build() {
    Column() {
      Row() {
        Button("< 返回")
          .width(80)
        Text("Row布局实战页面")
          .layoutWeight(1)
          .fontSize(20)
          .textAlign(TextAlign.Center)
        Button("设置")
          .width(80)
      }
      .width("100%")
      .height(56)
      .alignItems(ItemAlign.Center)
      .padding({ left: 10, right: 10 })
      .backgroundColor("#FFFFFF")
    }
    .width("100%")
    .height("100%")
  }
}

4.2 实战二：底部双操作按钮 Row（确认 / 取消）

业务需求：底部两个按钮均分整行宽度，中间保留间距，垂直居中。

ets

@Entry
@Component
struct BottomBtnRow {
  build() {
    Column() {
      Blank().layoutWeight(1)
      Row({ space: 16 }) {
        Button("取消")
          .layoutWeight(1)
          .height(48)
          .backgroundColor("#EEEEEE")
          .fontColor("#333333")
        Button("确认提交")
          .layoutWeight(1)
          .height(48)
          .backgroundColor("#007DFF")
      }
      .width("100%")
      .padding({ left: 20, right: 20, bottom: 30 })
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#F5F5F5")
  }
}

4.3 实战三：图文并排卡片 Row 布局

业务需求：左侧图片，右侧上下两行文字，整体横向排布，垂直居中对齐。

ets

@Entry
@Component
struct ImageTextRow {
  build() {
    Row({ space: 15 }) {
      Rect()
        .width(80)
        .height(80)
        .fill("#87CEEB")
        .borderRadius(8)
      Column({ space: 8 }) {
        Text("鸿蒙Row布局教程")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
        Text("横向线性容器Row多场景实战开发")
          .fontSize(14)
          .fontColor("#666666")
      }
      .layoutWeight(1)
    }
    .width("100%")
    .padding(15)
    .backgroundColor("#FFFFFF")
    .borderRadius(12)
    .margin(10)
  }
}

4.4 实战四：不等宽自适应权重布局

业务需求：左侧标签固定宽度，中间输入框自适应填充，右侧小按钮固定宽度。

ets

@Entry
@Component
struct WeightRowDemo {
  @State keyWord: string = ""
  build() {
    Row({ space: 10 }) {
      Text("搜索")
        .width(50)
        .fontSize(16)
      TextInput({ placeholder: "输入关键词", text: this.keyWord })
        .layoutWeight(1)
        .height(44)
      Button("搜索")
        .width(70)
        .height(44)
    }
    .width("100%")
    .padding(15)
  }
}

五、Row 布局多端适配与性能优化方案

5.1 多屏幕自适应规范

1. 优先使用 layoutWeight 实现自适应，避免写死固定宽度导致小屏溢出；
2. 容器宽度统一设置width("100%")，适配设备完整屏幕宽度；
3. 间距 space、内边距 padding 统一使用 vp 单位，系统自动适配不同分辨率屏幕；
4. 避免使用 px 像素单位，多终端会出现尺寸偏差。

5.2 渲染性能优化规则

1. 禁止多层 Row 嵌套 Row，复杂排版优先使用一层 Row 搭配 Column 内部组合，减少渲染树层级；
2. Row 内部子组件数量控制在 10 个以内，过多横向组件会降低页面滑动帧率；
3. 静态固定布局提前设置宽高，减少 ArkUI 实时尺寸计算开销；
4. 长列表 ListItem 内的 Row 尽量简化样式，去除阴影、渐变等重绘属性。

六、Row 开发高频问题与解决方案

问题 1：小屏设备 Row 内组件横向溢出、内容被截断 解决：子组件添加.layoutWeight(数值)分配剩余宽度，Row 设置 width ("100%") 铺满屏幕。

问题 2：Row 内图文高低不一，文字与图片无法居中对齐 解决：给 Row 添加.alignItems(ItemAlign.Center)统一垂直居中。

问题 3：space 间距在不同屏幕宽窄差异大，布局不协调 解决：不依赖 space 实现两端均分，改用justifyContent(FlexAlign.SpaceBetween)自动分配留白。

问题 4：设置 layoutWeight 后组件宽度不生效 解决：layoutWeight 仅作用于 Row 剩余空白区域，组件不能同时设置固定 width 百分比；权重分配只对 Row 内一级子组件生效，嵌套 Column 内部组件无效。

问题 5：多层 Row 嵌套页面滑动卡顿 解决：重构布局结构，减少嵌套层级，将双层 Row 改为单层 Row 搭配内部 Column 组合。

问题 6：按钮均分后高度不一致，界面不协调 解决：给所有按钮统一设置固定 height，配合 alignItems 垂直对齐。

七、总结

Row 是 OpenHarmony ArkUI 横向线性布局唯一核心容器，依靠 space 间距、justifyContent 水平排布、alignItems 垂直对齐、layoutWeight 自适应权重四大核心能力，覆盖导航、表单、按钮栏、图文卡片全部横向 UI 场景。开发过程中，layoutWeight 是解决多终端屏幕适配的关键属性，可彻底规避横向内容溢出问题；合理控制 Row 嵌套层级、简化内部组件样式能够有效提升页面渲染性能。

鸿蒙设备包含手机、平板、大屏多种尺寸，使用 Row 布局必须遵循自适应开发规范，优先采用权重自适应而非固定宽度；区分水平、垂直两套对齐属性，避免排布逻辑混淆。本文提供的四套业务实战代码可直接复用至项目，汇总的常见布局问题与修复方案可作为 UI 开发自查标准，为 OpenHarmony 规范化界面开发提供完整横向布局实操模板。