HarmonyOS 应用开发：常见布局 Row 和 Column

border

边框通过 border 属性设置，其参数类型为 BorderOptions 接口，包含多个可选字段：

• width：边框粗细；
• color：边框颜色；
• radius：圆角半径（可实现圆角矩形）；
• style：边框样式（如实线、虚线等，部分版本支持）。

.border({ width:2, color:'#FF0000', radius:10})

🔍 源码视角：BorderOptions 是一个接口，意味着你可以只传入需要的属性，其余使用默认值。

padding

padding 设置容器内部边距，即子组件与容器边框之间的距离。注意：它影响的是内容区到边框的距离，而非子组件之间的间距。

.padding(10)// 四周内边距均为 10vp
.padding({ left:5, right:15})// 精确控制各方向

📌 关键区别：padding 是'内边距'，margin 是'外边距'。

margin

margin 控制当前 Column 与其外部兄弟组件或父容器之间的距离，属于'外边距'。

.margin(20)// 外边距 20vp

⚠️ 注意：margin 不会影响子组件之间的间距，仅作用于当前容器整体。

space

当需要统一设置所有子组件之间的垂直间距时，使用 space 属性比逐个设置 margin 更高效、更清晰。

Column({ space:10}){
    Text('Item 1')
    Text('Item 2')
    Text('Item 3')
}

✅ 最佳实践：优先使用 space 而非为每个子项加 margin，代码更简洁且语义明确。

alignItems

alignItems 控制子组件在**交叉轴（水平方向）**上的对齐方式。由于 Column 的主轴是垂直的，因此交叉轴为水平方向。

可选值来自 HorizontalAlign 枚举：

HorizontalAlign.Start

子组件左对齐（从左开始）。

HorizontalAlign.Center

子组件水平居中。

HorizontalAlign.End

子组件右对齐（靠右结束）。

🧭 记忆技巧：Column → 垂直排列 → alignItems 控制左右对齐 → 使用 HorizontalAlign。

justifyContent

justifyContent 控制子组件在**主轴（垂直方向）**上的分布方式。默认值为 FlexAlign.Start（顶部对齐）。

可选值包括：

FlexAlign.Start

顶部对齐（默认）。

FlexAlign.Center

垂直居中。

FlexAlign.End

底部对齐。

FlexAlign.SpaceBetween

首尾元素贴边，中间均匀分布。

FlexAlign.SpaceAround

每个元素上下间距相等，首尾留一半间距。

FlexAlign.SpaceEvenly

所有间距（包括顶部和底部）完全相等。

🎯 应用场景：SpaceBetween：常用于页脚按钮（'取消'在左，'确定'在右）；Center：用于居中弹窗内容；SpaceEvenly：用于均匀分布导航图标。

单位问题

在 HarmonyOS 开发中，合理选择尺寸单位对适配多设备至关重要。

px（像素）

• 定义：物理像素单位，1px = 1 个屏幕像素点。
• 特点：不随屏幕密度缩放，在高 DPI 设备上显示更小。
• 适用场景：需要绝对精确的场景，如 1px 分割线、细边框。

❌ 风险：在不同设备上视觉大小不一致，可能导致 UI 错位。

vp（虚拟像素）

• 定义：鸿蒙推荐的逻辑像素单位，系统会根据设备 DPI 自动换算为实际 px。
• 换算：1vp = 1px @ 160 DPI；在 320 DPI 设备上，1vp = 2px。
• 特点：保证视觉一致性，相同 vp 值在不同设备上看起来大小相近。
• 适用场景：绝大多数 UI 元素，如字体、按钮、间距、容器尺寸等。

如何选择？

注意事项

• 设计师提供的 HarmonyOS 设计稿通常以 vp 为单位，开发时应直接使用；
• 避免混用 px 和 vp，除非有明确需求；
• 使用 px 时，可通过 px2vp() 工具函数进行转换（如有需要）。

Row

Row 是 Column 的'水平兄弟'，用于在**水平方向（主轴为横轴）**上排列子组件。它同样基于 Flex 布局模型，默认从左到右排列。

🔄 核心区别：Column 主轴为垂直，Row 主轴为水平。因此，两者的对齐属性所作用的方向互换。

对比效果：

Column（垂直排列）

Row（水平排列）

💡 代码复用提示：同一套子组件，仅需将 Column 替换为 Row，即可实现横向布局，极大提升开发效率。

alignItems

在 Row 中，由于主轴是水平的，交叉轴变为垂直方向，因此 alignItems 使用 VerticalAlign 枚举：

VerticalAlign.Top

子组件顶部对齐。

VerticalAlign.Center

垂直居中对齐。

VerticalAlign.Bottom

底部对齐。

🧭 记忆技巧：Row → 水平排列 → alignItems 控制上下对齐 → 使用 VerticalAlign。

justifyContent

justifyContent 在 Row 中控制**水平方向（主轴）**的分布，其取值与 Column 完全相同（仍为 FlexAlign 枚举），只是作用方向变为左右。

• Start：左对齐（默认）
• Center：水平居中
• End：右对齐
• SpaceBetween / SpaceAround / SpaceEvenly：水平间距分布

✅ 无需重复学习：只要理解主轴方向，justifyContent 的行为逻辑完全一致。

总结建议

🏗️ 开发口诀：'Column 看左右，Row 看上下' —— 指 alignItems；'主轴用 justifyContent，交叉轴用 alignItems'。

掌握 Row 与 Column 的异同，是构建鸿蒙应用 UI 的第一步。结合 space、padding、margin 和对齐属性，几乎可以实现所有常见的线性布局需求。

全套代码

@Entry @Component
struct Index {
    build() {
        Row({space:10}){
            Text('你好，VON').width(100).height(100).border({width:1,color:'red',radius:50})
            Text('你好，VON').width(100).height(100).border({width:1,color:'red',radius:50})
            Text('你好，VON').width(100).height(100).border({width:1,color:'red',radius:50})
        }
        .width('100%')
        .height('100%')
        .border({width:1,color:'green',radius:50})
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceEvenly)
    }
}