华为仓颉编程语言开发鸿蒙 App:Row 和 Column 搞懂了,八成页面你都能自己搭出来

Row 和 Column 搞懂了，八成页面你都能自己搭出来

刚学做页面的人，常常对着一堆布局组件发懵，不知道从哪下手。其实大可不必。在华为仓颉编程语言开发华为鸿蒙系统应用时，最该先吃透的就两个：Row 和 Column。把这两个玩明白，市面上八成 App 的页面布局，你都能搭出来。

道理很简单：手机页面里的内容，要么是横着排，要么是竖着排，再不然就是横竖嵌套。Row 管横排，Column 管竖排，它俩一组合，卡片、表单、列表头这些常见结构就全有了。这篇就带你把这两个组件和它们最关键的几个用法讲透。

先记住一句话：Row 横排，Column 竖排

这是最核心的认知，简单到一句话：Row 是沿水平方向布局的容器，里面的子组件横着一字排开；Column 是沿垂直方向布局的容器，子组件竖着往下摞。

import kit.ArkUI.*          Column {          Text("第一行")          Text("第二行")          }          Row {          Text("左")          Text("右")          }

就这么直观。你想让几个东西左右排，用 Row；想让它们上下排，用 Column。绝大多数布局，本质上就是这两种排法的组合。先把这个方向感建立起来，后面就好办了。

真正的威力：嵌套

单独一个 Row 或 Column 能做的有限，它俩的威力在于嵌套，也就是一个里面套另一个。

// 一个典型的用户卡片：左边头像，右边竖排名字和简介          Row {          Image("avatar.png").width(48).height(48)          Column {          Text("张三").fontSize(16)          Text("仓颉开发者").fontSize(12)          }          }

你看这个用户卡片：外层 Row 把头像和文字区左右分开，内层 Column 又把名字和简介上下排好。横里有竖、竖里有横，复杂布局就是这么一层层套出来的。想清楚「哪部分横排、哪部分竖排」，结构自然就出来了。

主轴对齐：justifyContent 管「排的方向上」怎么分布

光会排还不够，得会对齐。第一个关键属性是 `justifyContent`，它管子组件在「主轴方向」上怎么分布。Row 的主轴是水平的，Column 的主轴是垂直的。

// 列表头：标题靠左，按钮靠右，两端对齐          Row {          Text("我的收藏")          Text("查看全部")          }.justifyContent(FlexAlign.SpaceBetween)

`justifyContent` 接收 `FlexAlign` 枚举，常用的有 `Start` 靠起点、`Center` 居中、`End` 靠终点，还有 `SpaceBetween` 两端对齐、中间均分。上面这个列表头，用 `SpaceBetween` 就能让标题和按钮一个贴左、一个贴右，这是 App 里最常见的排版之一。

交叉轴对齐：alignItems 管「另一个方向上」对齐

第二个关键属性是 `alignItems`，它管的是「交叉轴方向」上的对齐，也就是和主轴垂直的那个方向。

// Row 里图标和文字垂直居中对齐，看起来才整齐          Row(space: 8) {          Image("icon.png").width(20).height(20)          Text("设置")          }.alignItems(VerticalAlign.Center)

Row 是横排，它的交叉轴是垂直方向，所以 Row 的 `alignItems` 接 `VerticalAlign`，控制子组件上下怎么对齐；Column 反过来，交叉轴是水平方向，`alignItems` 接 `HorizontalAlign`。图标和文字并排时设个垂直居中，视觉上立刻就齐了，不设的话容易一高一低。

间距别用空组件凑：space 参数更干净

新手常犯的一个毛病，是想让元素之间有空隙，就硬塞一堆空白组件去撑。其实 Row 和 Column 创建时就能直接传 `space`，统一设置子组件之间的间距。

Column(space: 12) {          Button("登录")          Button("注册")          Button("忘记密码")          }

一个 `space: 12`，三个按钮之间就有了均匀的 12 的间距，代码干净，间距还统一。比起手动加空白组件，这种方式既好维护又不容易出错。表单、按钮组这类等距排列的场景，用它最合适。

两个组件，一套思路，搭遍大部分页面

回头总结，搞定 Row 和 Column，其实就是搞定四件事：用 Row 还是 Column 定排列方向，用嵌套组合出复杂结构，用 `justifyContent` 管主轴分布，用 `alignItems` 管交叉轴对齐，再用 `space` 调间距。这套思路走通，卡片、表单、列表头、导航栏，大部分页面你都能拆解、都能搭。

布局看着花样多，底层就是横排竖排这点事。把 Row 和 Column 这两块基石焊牢，你做页面会越来越快、越来越稳。