前言

在鸿蒙应用开发中，用户界面（UI）是连接用户与功能的桥梁。而构建美观、响应式的界面，离不开对布局系统的深入理解。ArkUI 作为鸿蒙官方推荐的声明式 UI 框架，提供了简洁而强大的布局能力。其中，Column（列布局）、Row（行布局）和 Stack（层叠布局） 是最基础、最常用的三大布局容器。

本文将通过详细讲解这三种布局组件的核心属性、使用规则和典型场景，并结合实际案例演示如何组合它们来构建真实页面结构，帮助你打下坚实的 UI 开发基础。

一、布局理念：声明式 + 弹性盒模型

ArkUI 采用声明式语法，开发者只需描述“UI 应该是什么样子”，框架会自动处理渲染和更新。其布局机制借鉴了现代 Web 的弹性盒（Flexbox）思想，强调：

• 方向性（主轴与交叉轴）
• 对齐方式
• 间距控制
• 尺寸自适应

下面，我们逐一解析三大布局组件。

二、Column：垂直列布局

Column 将子组件从上到下垂直排列，适用于列表、表单、卡片等纵向结构。

核心属性

示例：用户信息卡片

Column() {
  Text('张三')
    .fontSize(24)
    .fontWeight(FontWeight.Bold)

  Text('HarmonyOS 开发者')
    .fontSize(16)
    .fontColor('#666')

  Button('关注')
    .margin({ top: 10 })
}
.width('100%')
.height(150)
.alignItems(HorizontalAlign.Center) // 水平居中
.space(8) // 子元素间距 8px
.backgroundColor('#f5f5f5')
.borderRadius(12)
.padding(16)

✅ 适用场景：个人主页、设置项列表、消息流等垂直内容。

三、Row：水平行布局

Row 将子组件从左到右水平排列，常用于工具栏、标签、图标+文字组合等。

核心属性

示例：底部导航栏

Row() {
  Column() {
    Image($r('app.media.home_icon'))
      .width(24)
      .height(24)
    Text('首页').fontSize(12)
  }
  .alignItems(HorizontalAlign.Center)

  Column() {
    Image($r('app.media.message_icon'))
      .width(24)
      .height(24)
    Text('消息').fontSize(12)
  }
  .alignItems(HorizontalAlign.Center)

  Column() {
    Image($r('app.media.profile_icon'))
      .width(24)
      .height(24)
    Text('我的').fontSize(12)
  }
  .alignItems(HorizontalAlign.Center)
}
.width('100%')
.height(60)
.justifyContent(FlexAlign.SpaceBetween) // 主轴两端对齐
.padding({ horizontal: 30 })
.backgroundColor('#fff')
.borderTop({ width: 1, color: '#eee' })

💡 技巧：justifyContent(FlexAlign.SpaceBetween) 可让三个按钮均匀分布在左右两端和中间。

✅ 适用场景：操作按钮组、评分星标、商品价格+促销标签等。

四、Stack：层叠布局

Stack 将子组件按顺序堆叠在同一区域，后添加的组件覆盖在前一个之上。非常适合实现遮罩、悬浮按钮、图片+角标等效果。

核心特性

• 默认所有子组件左上角对齐；
• 可通过 alignContent 控制整体对齐；
• 子组件可通过 .position() 精确定位（绝对定位）。

示例：带“NEW”角标的商品图

Stack() {
  // 背景图片
  Image($r('app.media.product_img'))
    .width(120)
    .height(120)
    .borderRadius(8)

  // 角标（右上角）
  Text('NEW')
    .fontSize(10)
    .fontColor(Color.White)
    .backgroundColor('#ff4d4f')
    .padding({ left: 4, right: 4 })
    .borderRadius(4)
    .position({ x: 80, y: 8 }) // 相对于 Stack 左上角偏移
}
.width(120)
.height(120)

✅ 适用场景： 图片水印/角标 悬浮操作按钮（FAB） 弹窗遮罩层 游戏 HUD 界面

五、组合实战：构建一个“新闻卡片”

现在，我们将综合运用 Column、Row 和 Stack 构建一个完整的新闻卡片：

Column() {
  // 标题与摘要
  Column() {
    Text('鸿蒙生态迎来新突破')
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .maxLines(2)
      .textOverflow({ overflow: TextOverflow.Ellipsis })

    Text('华为宣布 HarmonyOS NEXT 将全面支持原生应用...')
      .fontSize(14)
      .fontColor('#666')
      .margin({ top: 6 })
      .maxLines(2)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
  }
  .layoutWeight(1) // 占据剩余空间

  // 底部信息栏
  Row() {
    Text('科技频道')
      .fontSize(12)
      .fontColor('#999')

    Text('2小时前')
      .fontSize(12)
      .fontColor('#999')
      .layoutWeight(1) // 自动撑开，实现右对齐
      .textAlign(TextAlign.End)
  }
  .margin({ top: 12 })
}
.width('100%')
.height(140)
.padding(12)
.backgroundColor('#fff')
.borderRadius(10)
.shadow({ radius: 8, color: '#00000010' })

🔍 布局解析： 外层 Column 垂直组织标题、摘要和底部信息； 底部 Row 中使用 layoutWeight(1) 实现“科技频道”左对齐、“2小时前”右对齐； 整体卡片具备圆角、阴影、内边距等视觉细节。

六、常见问题与最佳实践

❓ 为什么子组件没按预期对齐？

• 检查是否设置了 width('100%') 或 height('100%')；
• 确认 alignItems 方向是否正确（Column 的交叉轴是水平，Row 是垂直）。

❓ 如何让某个子组件占据剩余空间？

• 使用 .layoutWeight(1)（类似 Flex 的 flex: 1）。

✅ 推荐实践：

• 优先使用 Column/Row 组合，避免过度嵌套；
• 层叠效果优先考虑 Stack，而非绝对定位；
• 复杂布局可拆分为多个自定义组件，提升可读性。

七、小结

今天我们深入学习了 ArkUI 的三大基础布局组件：

• Column：垂直排列，适合列表与卡片；
• Row：水平排列，适合工具栏与标签；
• Stack：层叠覆盖，适合角标与悬浮元素。

掌握它们的属性与组合方式，你已经能够构建大多数常见页面结构。接下来，我们将继续学习 Flex 布局、Grid 网格、Scroll 容器 等进阶布局能力，让你的 UI 更加灵活强大。

🛠️ 动手练习建议： 用 Column + Row 实现一个聊天消息气泡； 用 Stack 实现一个带播放按钮的视频封面； 组合三种布局，构建一个“商品详情页”头部区域。

打好布局基础，你的鸿蒙 UI 开发之路将更加顺畅！