前言

无论开发：

• 登录页面
• 电商首页
• 微信聊天
• 新闻列表
• 后台管理

都离不开一个核心知识点——布局（Layout）。

很多 Android 开发者第一次学习 ArkUI 时都会发现：

没有 LinearLayout？没有 RelativeLayout？没有 ConstraintLayout？

取而代之的是：

• Row
• Column
• Flex
• Stack

刚开始会觉得陌生，但真正上手之后，你会发现 ArkUI 的布局方式更加简单、高效。

本文将通过大量实例，带你彻底掌握 HarmonyOS NEXT 中最常用的四种布局方式。

---

一、ArkUI布局思想

ArkUI采用的是声明式布局。

以前 Android：

XML
↓

解析布局
↓

生成View

现在 ArkUI：

组件

↓

组合

↓

页面

整个页面其实就是各种组件不断组合而成。

例如：

Column
├── Text
├── Image
└── Button

这种写法更加符合现代前端框架的开发思想。

---

二、Column（垂直布局）

这是鸿蒙中最常用的布局。

所有子组件：

从上到下排列

例如：

Column() {
    Text("用户名")

    TextInput()

    Button("登录")
}

页面效果：

用户名

[输入框]

[登录按钮]

是不是很像登录页面？

实际开发中：

• 登录
• 注册
• 设置页面

几乎都会使用 Column。

---

设置间距

Column({ space: 20 }) {

}

效果：

组件

（20px）

组件

（20px）

组件

比 Android 一个个设置 margin 更方便。

---

设置宽高

Column()
.width('100%')
.height('100%')

表示占满整个屏幕。

这是开发中最常见的写法。

---

三、Row（水平布局）

Row 与 Column 相反。

所有组件：

从左到右排列

例如：

Row() {

    Image($r('app.media.icon'))

    Text("HarmonyOS NEXT")

}

效果：

🖼 HarmonyOS NEXT

非常适合：

• 用户头像
• 商品信息
• 新闻标题

---

实战：个人信息

Row() {

    Image()

    Column() {
        Text("张三")

        Text("VIP用户")
    }

}

页面：

头像   张三
      VIP用户

是不是就是微信个人资料？

---

四、Stack（层叠布局）

Stack 可以理解为：

组件可以重叠

例如：

Stack() {

    Image()

    Text("HOT")

}

效果：

+----------------+
|                |
|     图片       |
|          HOT   |
+----------------+

最常见场景：

• 图片角标
• 视频播放按钮
• Banner文字
• 商品优惠标签

---

实战：商品角标

Stack() {

    Image($r('app.media.phone'))

    Text("新品")
        .backgroundColor(Color.Red)

}

开发商城时几乎都会用到。

---

五、Flex（弹性布局）

如果说：

Column、Row 是固定布局。

那么：

Flex 就是：

自动适应空间。

例如：

Flex({

    direction: FlexDirection.Row

}) {

    Text("A")

    Text("B")

    Text("C")

}

它最大的优势：

自动换行。

---

例如：

商品标签：

新品

热卖

官方

旗舰店

包邮

使用 Flex 非常方便。

---

六、四种布局什么时候用？

这是很多新手最容易困惑的问题。

布局	使用场景
Column	登录页、设置页、表单
Row	商品、头像、列表
Stack	图片覆盖、角标
Flex	标签、自动换行

开发经验：

80%的页面都是 Column + Row 的组合。

真正大型项目也是如此。

---

七、组合布局案例

来看一个商城商品卡片。

+--------------------------------------+
|               图片                    |
+--------------------------------------+
| iPhone 17 Pro Max                   |
| ￥8999                              |
| ⭐⭐⭐⭐⭐ 999+评价                      |
+--------------------------------------+

如何实现？

外层：

Column

商品信息：

Column

评分：

Row

角标：

Stack

整个页面：

Column

↓

Stack

↓

Column

↓

Row

这就是企业项目最经典的布局方式。

---

八、新手最容易踩的坑

坑一：Row 默认不会自动换行

很多同学：

Row(){

}

放十几个组件。

结果：

全部挤到一行。

解决：

使用：

Flex()

---

坑二：Column 高度为内容高度

很多人以为：

Column(){

}

默认撑满屏幕。

其实不是。

正确：

.height('100%')

---

坑三：忘记设置对齐方式

例如：

Column()
.alignItems(HorizontalAlign.Center)

否则：

默认左对齐。

---

九、企业项目布局技巧

真正企业开发：

一般不会：

一个页面

↓

一个布局

而是：

Column

↓

Header

↓

Body

↓

Footer

Body：

Column

↓

Row

↓

Stack

↓

Flex

层层组合。

所以：

布局能力决定了：

页面开发速度。

---

十、总结

ArkUI 的布局其实只有四个核心：

布局	一句话理解
Column	从上到下
Row	从左到右
Stack	重叠显示
Flex	自动伸缩、自动换行

只要掌握这四个布局，你就能够完成绝大多数 HarmonyOS NEXT 页面开发。