系列鸿蒙 HarmonyOS 6.1 新特性实战 · 第 46 篇Column 和 Row 是 ArkUI 中最基础的两种线性布局容器分别沿垂直和水平方向排列子组件。掌握justifyContent、alignItems和layoutWeight这三个核心属性能解决日常开发中绝大多数的布局需求。本篇通过可运行的完整示例系统讲解每个属性的含义与适用场景。运行效果初始状态Column 默认 Start 对齐切换到 SpaceBetween 模式后子元素均匀分布在两端之间Column 的主轴对齐justifyContentColumn 的主轴是垂直方向justifyContent控制子组件沿垂直方向的分布方式。ArkUI 提供了六种FlexAlign值枚举值效果FlexAlign.Start子组件紧靠顶部默认FlexAlign.Center子组件整体居中FlexAlign.End子组件紧靠底部FlexAlign.SpaceBetween首尾紧贴边缘其余均分间距FlexAlign.SpaceAround每个子组件两侧各有相等的边距FlexAlign.SpaceEvenly所有间距含首尾完全相等// Column justifyContent 示例 Column() { Text(A) .width(80%).height(40) .backgroundColor(#e8f0ff) .textAlign(TextAlign.Center) Text(B) .width(80%).height(40) .backgroundColor(#b3d1ff) .textAlign(TextAlign.Center) Text(C) .width(80%).height(40) .backgroundColor(#6699ff) .fontColor(#fff) .textAlign(TextAlign.Center) } .width(100%).height(200) .justifyContent(FlexAlign.SpaceBetween) // 改成 SpaceAround / SpaceEvenly / Center / Start / End 观察差异SpaceBetweenA 顶部对齐C 底部对齐B 居中。SpaceAround三个元素各自两侧间距相等因此首尾有半个间距。SpaceEvenly所有间距含首尾完全一致视觉上最均匀。Row 的交叉轴对齐alignItemsRow 的主轴是水平方向交叉轴是垂直方向alignItems控制子组件在垂直方向的对齐。当子组件高度不同时效果尤为明显// Row alignItems 示例子组件高度各不相同 Row({ space: 8 }) { Text(Top) .height(40) .backgroundColor(#e8f0ff) .padding(8) Text(Center\n两行) .height(80) .backgroundColor(#b3d1ff) .padding(8) Text(Bottom) .height(60) .backgroundColor(#6699ff) .fontColor(#fff) .padding(8) } .width(100%) .alignItems(VerticalAlign.Center) // Top / Center / BottomVerticalAlign.Top使所有子组件顶部对齐Center使它们垂直居中Bottom使底部对齐。同理Column 的alignItems接受HorizontalAlign.Start/Center/End控制子组件在水平方向的对齐。layoutWeight按比例分配剩余空间当需要让子组件按比例瓜分父容器的剩余空间时使用layoutWeight。设置了该属性后组件自身的width在 Row 中或height在 Column 中会被忽略由权重值决定最终尺寸。// 1:2:1 比例分配横向空间 Row() { Text(1) .layoutWeight(1) .height(44) .backgroundColor(#e8f0ff) .textAlign(TextAlign.Center) Text(2) .layoutWeight(2) .height(44) .backgroundColor(#0066ff) .fontColor(#fff) .textAlign(TextAlign.Center) Text(1) .layoutWeight(1) .height(44) .backgroundColor(#e8f0ff) .textAlign(TextAlign.Center) } .width(100%)三个 Text 的权重比为 1:2:1中间元素占父容器宽度的一半两端各占四分之一。若父容器宽度为 360vp则分别为 90vp、180vp、90vp。space 参数 vs padding/marginColumn 和 Row 都支持构造参数{ space: number }用于在相邻子组件之间插入统一间距首个子组件前和最后一个子组件后不产生额外间距// space 参数仅在子组件之间添加间距 Column({ space: 12 }) { Text(第一行).width(80%).height(40).backgroundColor(#e8f0ff).textAlign(TextAlign.Center) Text(第二行).width(80%).height(40).backgroundColor(#b3d1ff).textAlign(TextAlign.Center) Text(第三行).width(80%).height(40).backgroundColor(#6699ff).fontColor(#fff).textAlign(TextAlign.Center) } .width(100%).padding({ top: 16, bottom: 16, left: 16, right: 16 }) // padding 控制容器内边距space 控制子组件间距两者各司其职space与justifyContent: SpaceEvenly的区别space是固定像素值首尾无间距SpaceEvenly是自适应均分首尾也有相等间距。完整代码import { FlexAlign, VerticalAlign, HorizontalAlign } from ohos.arkui.common Entry Component struct ColumnRowDemo { State alignMode: FlexAlign FlexAlign.Start private modes: FlexAlign[] [ FlexAlign.Start, FlexAlign.Center, FlexAlign.End, FlexAlign.SpaceBetween, FlexAlign.SpaceAround, FlexAlign.SpaceEvenly ] private modeNames: string[] [ Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly ] State modeIndex: number 0 build() { Column({ space: 24 }) { // 标题 Text(Column justifyContent 演示) .fontSize(16).fontWeight(FontWeight.Bold).fontColor(#1a1a1a) // justifyContent 演示区 Column() { Text(A) .width(80%).height(40) .backgroundColor(#e8f0ff).textAlign(TextAlign.Center) Text(B) .width(80%).height(40) .backgroundColor(#b3d1ff).textAlign(TextAlign.Center) Text(C) .width(80%).height(40) .backgroundColor(#6699ff).fontColor(#fff).textAlign(TextAlign.Center) } .width(100%).height(200) .backgroundColor(#f8f9ff).borderRadius(8) .justifyContent(this.alignMode) // 当前模式标签 Text(当前模式 this.modeNames[this.modeIndex]) .fontSize(13).fontColor(#666) // 切换按钮 Button(切换 justifyContent) .width(60%).height(40) .onClick(() { this.modeIndex (this.modeIndex 1) % this.modes.length this.alignMode this.modes[this.modeIndex] }) Divider().strokeWidth(1).color(#e0e0e0) // Row alignItems 演示 Text(Row alignItems 演示高度各异) .fontSize(16).fontWeight(FontWeight.Bold).fontColor(#1a1a1a) Row({ space: 8 }) { Text(Top) .height(40).backgroundColor(#e8f0ff).padding(8) Text(Center\n两行) .height(80).backgroundColor(#b3d1ff).padding(8) Text(Bottom) .height(60).backgroundColor(#6699ff).fontColor(#fff).padding(8) } .width(100%).alignItems(VerticalAlign.Center) .backgroundColor(#f8f9ff).borderRadius(8).padding(8) Divider().strokeWidth(1).color(#e0e0e0) // layoutWeight 演示 Text(layoutWeight 1:2:1 比例分配) .fontSize(16).fontWeight(FontWeight.Bold).fontColor(#1a1a1a) Row() { Text(1) .layoutWeight(1).height(44) .backgroundColor(#e8f0ff).textAlign(TextAlign.Center) Text(2) .layoutWeight(2).height(44) .backgroundColor(#0066ff).fontColor(#fff).textAlign(TextAlign.Center) Text(1) .layoutWeight(1).height(44) .backgroundColor(#e8f0ff).textAlign(TextAlign.Center) } .width(100%) } .width(100%).padding(16) .backgroundColor(#ffffff) } }API 速查属性/方法说明Column({ space: number })设置子组件之间的垂直间距不含首尾Row({ space: number })设置子组件之间的水平间距不含首尾.justifyContent(FlexAlign)控制主轴方向的子组件分布方式.alignItems(VerticalAlign)Row 中控制交叉轴垂直对齐.alignItems(HorizontalAlign)Column 中控制交叉轴水平对齐FlexAlign.Start主轴起始方向靠齐FlexAlign.SpaceBetween首尾贴边其余均分间距FlexAlign.SpaceAround每个元素两侧各有等量外边距FlexAlign.SpaceEvenly所有间距含首尾完全相等.layoutWeight(number)按权重比例分配主轴剩余空间忽略自身 width/height小结justifyContent控制主轴方向的分布Column垂直Row水平六种 FlexAlign 值各有适用场景alignItems控制交叉轴方向的对齐Column水平Row垂直子组件高度不同时效果最明显space参数在子组件之间插入固定间距首尾不受影响与justifyContent可以同时使用layoutWeight忽略组件在主轴方向的自身尺寸按权重分配剩余空间实现弹性比例布局SpaceBetween 首尾贴边SpaceAround 两侧各有半间距SpaceEvenly 所有间距完全一致简单线性排列优先用 Column/Row复杂换行或双轴控制场景再考虑 Flex上一篇Toast、AlertDialog 与 CustomDialog 弹窗全解 | 下一篇Flex 弹性布局完全指南