线性布局(Row/Column)组件详解

一、基本概念

线性布局是通过Column（垂直） 和Row（水平） 容器实现子元素单一方向有序排列的基础布局方式，是所有复杂布局的底层支撑：

  • Column容器：子元素沿垂直方向（从上到下）排列
  • Row容器：子元素沿水平方向（从左到右）排列

核心概念（必须掌握）

概念定义
主轴与容器排列方向一致的轴线（Row=水平，Column=垂直）
交叉轴与主轴垂直的轴线（Row=垂直，Column=水平）
布局容器承载布局规则的载体（Row/Column），负责子元素尺寸计算与排列
布局子元素容器内的内容组件（Text/Button等），受容器布局规则约束

记忆技巧：容器名称即主轴方向——Column（列）=垂直主轴，Row（行）=水平主轴

容器属性对比表

容器类型主轴方向主轴对齐属性交叉轴方向交叉轴对齐属性（容器/元素）
Row水平justifyContent垂直alignItems（VerticalAlign）/ alignSelf（ItemAlign）
Column垂直justifyContent水平alignItems（HorizontalAlign）/ alignSelf（ItemAlign）

二、核心重点：主轴排列方式（justifyContent）

justifyContent 配合 FlexAlign 枚举值，控制子元素在主轴方向的整体分布，是线性布局的核心功能（需给容器设置固定宽高/占满父容器，否则效果不生效）。

1. 6种核心枚举值

FlexAlign枚举值核心效果适用场景
Start（默认）靠主轴起始端对齐（Row左/Column上）常规列表、默认排版
Center主轴居中对齐标题、卡片组居中
End靠主轴结束端对齐（Row右/Column下）操作按钮靠右/下
SpaceBetween两端对齐，中间间距相等导航栏、水平功能区
SpaceAround均匀分布，首尾间距=中间间距1/2卡片列表、非贴边布局
SpaceEvenly等距分布，所有间距完全相等严格均匀的展示布局

2. 实战示例

Column容器（垂直主轴）
@Entry
@Component
struct ColumnJustifyDemo {
  build() {
    Column() {
      Text('元素1').width('80%').height(50).backgroundColor(0xF5DEB3)
      Text('元素2').width('80%').height(50).backgroundColor(0xD2B48C)
      Text('元素3').width('80%').height(50).backgroundColor(0xF5DEB3)
    }
    .width('100%')
    .height(300) // 必须设置固定高度
    .backgroundColor('rgb(242,242,242)')
    .justifyContent(FlexAlign.SpaceAround) // 垂直均匀分布
  }
}
Row容器（水平主轴）
@Entry
@Component
struct RowJustifyDemo {
  build() {
    Row() {
      Text('元素1').width('20%').height(30).backgroundColor(0xF5DEB3)
      Text('元素2').width('20%').height(30).backgroundColor(0xD2B48C)
      Text('元素3').width('20%').height(30).backgroundColor(0xF5DEB3)
    }
    .width('100%')
    .height(200) // 固定高度
    .backgroundColor('rgb(242,242,242)')
    .justifyContent(FlexAlign.SpaceBetween) // 水平两端对齐
  }
}

三、核心重点：交叉轴对齐方式

3.1 容器级交叉轴对齐（alignItems）

控制所有子元素在交叉轴方向的统一对齐：

容器类型交叉轴方向常用枚举值核心效果
Column水平HorizontalAlign.Start/Center/End子元素左/中/右对齐
Row垂直VerticalAlign.Top/Center/Bottom子元素上/中/下对齐

示例（Column子元素水平居中）：

@Entry
@Component
struct ColumnAlignDemo {
  build() {
    Column() {
      Text('元素1').width('20%').height(30).backgroundColor(0xF5DEB3)
      Text('元素2').width('20%').height(30).backgroundColor(0xD2B48C)
    }
    .width('100%')
    .height(200)
    .backgroundColor('rgb(242,242,242)')
    .alignItems(HorizontalAlign.Center) // 所有子元素水平居中
  }
}

3.2 元素级交叉轴对齐（alignSelf）

控制单个子元素的交叉轴对齐，优先级高于容器的alignItems，专属枚举值为ItemAlign：

@Entry
@Component
struct AlignSelfDemo {
  build() {
    Column() {
      Text('继承容器左对齐').width('80%').height(50).backgroundColor(0xF5DEB3)
      Text('单独靠右对齐').width('80%').height(50).backgroundColor(0xD2B48C)
        .alignSelf(ItemAlign.End) // 覆盖容器对齐规则
    }
    .width('100%')
    .height(200)
    .backgroundColor('rgb(242,242,242)')
    .alignItems(HorizontalAlign.Start) // 容器默认左对齐
  }
}

四、核心基础：间距控制（space/margin/padding）

1. 三者核心对比

类型作用对象推荐场景灵活性
space容器内所有子元素之间统一间距（列表/表单）低（统一设置）
padding容器边缘与子元素内容与容器边缘间距中（可分方向）
margin组件与外部元素/容器个别组件间距微调高（精细控制）

2. 实战示例

@Entry
@Component
struct SpacePaddingMarginDemo {
  build() {
    Column() {
      // Column：space（子元素间距）+ padding（内边距）
      Column({ space: 20 }) { // 垂直间距20vp
        Text('子元素1').width('100%').height(40).backgroundColor(0xF5DEB3)
        Text('子元素2').width('100%').height(40).backgroundColor(0xD2B48C)
      }
      .width('100%')
      .padding(15) // 内边距15vp
      .backgroundColor(Color.Red)

      // Row：space + margin（外边距）
      Row({ space: 35 }) { // 水平间距35vp
        Text('子1').width('10%').height(80).backgroundColor(0xF5DEB3)
        Text('子2').width('10%').height(80).backgroundColor(0xD2B48C)
      }
      .padding(10)
      .backgroundColor(Color.Green)
      .margin({ top: 64 }) // 上边距64vp
    }
    .backgroundColor(Color.Pink)
    .padding(20)
  }
}

建议：优先用space统一控制子元素间距，避免space与margin混合使用导致间距混乱。

五、自适应基础

1. Blank组件：自动填充空白空间

主轴方向填充剩余空间，实现“两端对齐”，适配“文字+右侧控件”布局：

@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Row() {
        Text('蓝牙').fontSize(18)
        Blank() // 填充水平剩余空间，将开关推至右侧
        Toggle({ type: ToggleType.Switch, isOn: true })
      }
      .backgroundColor(0xFFFFFF)
      .borderRadius(15)
      .padding({ left: 12, right: 12 })
      .width('100%')
      .height(50)
    }
    .backgroundColor(0xEFEFEF)
    .padding(20)
    .width('100%')
  }
}

2. layoutWeight权重：比例分配空间

忽略子元素自身尺寸，按权重分配父容器剩余空间，适配任意屏幕：

@Entry
@Component
struct LayoutWeightExample {
  build() {
    Column() {
      Row() {
        Column().layoutWeight(1).backgroundColor(0xF5DEB3).height('100%') // 1份
        Column().layoutWeight(2).backgroundColor(0xD2B48C).height('100%') // 2份
        Column().layoutWeight(3).backgroundColor(0xF5DEB3).height('100%') // 3份
      }
      .height('30%') // 父容器高度固定
    }
    .padding(20)
  }
}

3. 百分比尺寸：固定占比自适应

@Entry
@Component
struct PercentSizeExample {
  build() {
    Row() {
      Text('20%宽').width('20%').height(80).backgroundColor(0xF5DEB3)
      Text('50%宽').width('50%').height(80).backgroundColor(0xD2B48C)
      Text('30%宽').width('30%').height(80).backgroundColor(0xF5DEB3)
    }
    .height('30%')
    .padding(20)
  }
}

六、实战案例：设置页面布局实现

@Entry
@Component
struct SettingPageDemo {
  build() {
    Column({ space: 10 }) { // 设置项垂直间距10vp
      // 设置项1：蓝牙
      Row() {
        Text('蓝牙').fontSize(16)
        Blank()
        Toggle({ type: ToggleType.Switch, isOn: true })
      }
      .padding({ left: 15, right: 15 }) // 左右内边距15vp
      .backgroundColor('#FFFFFF')
      .borderRadius(6)
      .width('100%')
      .height(50)

      // 设置项2：字体大小
      Row() {
        Text('字体大小').fontSize(16)
        Blank()
        Text('标准').fontSize(14).fontColor('#999999')
      }
      .padding({ left: 15, right: 15 })
      .backgroundColor('#FFFFFF')
      .borderRadius(6)
      .width('100%')
      .height(50)

      // 版权信息（推至底部）
      Blank()
      Text('© 2025 鸿蒙开发者').fontSize(12).fontColor('#999999')
        .margin({ bottom: 20 }) // 底部外边距20vp
    }
    .backgroundColor('#F5F5F5') // 页面背景色
    .padding(20)
    .width('100%')
    .height('100%') // 占满屏幕高度
  }
}

七、必备技能：布局调试与常见问题

7.1 3个实用调试技巧

  1. 背景色可视化：添加半透明背景色查看布局范围
    Column().backgroundColor('#FF000033') // 半透明红色
  2. 边框辅助：添加边框定位尺寸异常
    Row().border({ width: 1, color: '#0000FF33' }) // 半透明蓝色边框
  3. 简化排查法：注释部分子元素，逐步定位异常组件

7.2 常见问题速解

问题现象核心原因解决方案
对齐属性不生效容器无足够宽高给容器设置固定宽高或width('100%')
子元素超出容器子元素总尺寸超父容器用layoutWeight/百分比替代固定像素
间距混乱混合使用space和margin优先用space统一控制，margin仅微调
嵌套过深性能差嵌套层数>5层，计算量激增用Blank替代嵌套Row，提取重复布局为@Builder

总结

线性布局核心要点

  1. 核心逻辑：区分主轴（justifyContent） 和交叉轴（alignItems/alignSelf），容器需有固定尺寸才能生效；
  2. 间距控制：优先用space统一子元素间距，padding控内边距，margin仅做微调；
  3. 自适应方案：Blank（空白填充）、layoutWeight（比例分配）、百分比尺寸适配不同屏幕；
  4. 性能优化：布局嵌套≤3层，扁平化设计减少计算开销。

掌握线性布局是鸿蒙UI开发的基础，其“主轴-交叉轴”逻辑同样适用于弹性布局（Flex），是构建复杂界面的核心思维。

鸿蒙开发者学习与认证指引

（一）、官方学习班级报名（免费）

  1. 班级链接：HarmonyOS赋能资源丰富度建设（第四期）
  2. 学号填写规则：填写个人手机号码即可完成班级信息登记

（二）、HarmonyOS应用开发者认证考试（免费）

  1. 考试链接：HarmonyOS开发者能力认证入口

  2. 认证等级及适配人群

    • 基础认证：适配软件工程师、移动应用开发人员，需掌握HarmonyOS基础概念、DevEco Studio基础使用、ArkTS及ArkUI基础开发等能力；
    • 高级认证：适配项目经理、工程架构师，需掌握系统核心技术理念、应用架构设计、关键技术开发及应用上架运维等能力；
    • 专家认证：适配研发经理、解决方案专家，需掌握分布式技术原理、端云一体化开发、跨端迁移及性能优化等高级能力。

  3. 认证权益：通过认证可获得电子版证书以及其他专属权益。

# dubbo # harmonyos
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

【上新啦】持续扩容！鸿蒙生态伙伴 SDK专区 8 月上新合集来袭~

avatar HarmonyOS开发者社区
cover

【共创稿事节】 HarmonyOS 7 空间化 UI 实战：从平面布局到空间层级的界面重构

avatar HarmonyOS开发者社区
cover

HarmonyOS 7 新特性（二十八）｜Audio Kit 后台录音与无声排障

avatar HarmonyOS开发者社区