前言游戏主菜单除了标题和按钮常有一个「最高分徽章」——把图标、分数数字、NEW 标三个元素横排成一个小徽章挂在标题上方或右上角。这种「图标 文字 标签」的横排组合是Row容器最经典的场景。本篇以「猫猫大作战」主菜单的最高分徽章为锚点把Row容器的横排套路、justifyContent水平排列、alignItems垂直对齐、margin子间距讲透。读完本篇你将能独立写出三段横排徽章、两端贴边横排、图标按钮组三种横排布局。提示本系列不讲 ArkTS 基础语法与环境搭建假设你已跟完第 1–7 篇。一、场景拆解最高分徽章规格打开entry/src/main/ets/pages/Index.ets的MainMenuView最高分徽章横排三段// 来源entry/src/main/ets/pages/Index.ets MainMenuView() 改造片段 Row() { Text().fontSize(20) Text(最高分: ${this.highScore}) .fontSize(14) .fontColor(#2C3E50) .fontWeight(FontWeight.Bold) .margin({ left: 6 }) if (this.isNewHigh) { Text(NEW) .fontSize(10) .fontColor(#FFFFFF) .backgroundColor(#E74C3C) .borderRadius(4) .padding({ left: 4, right: 4, top: 2, bottom: 2 }) .margin({ left: 6 }) } } .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(rgba(255,255,255,0.7)) .borderRadius(16) .alignItems(VerticalAlign.Center) .margin({ bottom: 16 })徽章规格拆解维度取值作用容器Row三段横排子间距margin.left: 6图标/文字/NEW 标之间 6vp内边距padding 12/6内容与徽章边呼吸空间底色rgba(255,255,255,0.7)半透明白浮在渐变蓝上圆角16胶囊形徽章垂对齐VerticalAlign.Center三段顶部对齐文字基线居中关键经验徽章圆角 16比卡片 12 大比按钮 28 小——胶囊感但不全圆是「徽章」专属甜区。二、Row 容器核心属性速览参考 线性布局 (Row/Column) 官方指南。Row是水平线性容器子元素自左而右排列。2.1 本篇用到的属性属性类型作用本篇取值spacenumber子元素统一间距未用用 margin 单独控widthstring | number容器宽度不设内容撑开heightstring | number容器高度不设内容撑开paddingPadding | number内边距{ left: 12, right: 12, top: 6, bottom: 6 }backgroundColorstring | Color背景色rgba(255,255,255,0.7)borderRadiusnumber圆角16alignItemsVerticalAlign 枚举子元素垂直对齐CenterjustifyContentFlexAlign 枚举子元素水平排列未用自然排2.2 Row vs Column 主轴容器主轴justifyContent控alignItems控Row水平 ↔水平排列垂直对齐Column垂直 ↓垂直排列水平对齐记忆Row的alignItems用VerticalAlignColumn的alignItems用HorizontalAlign——别搞反。三、alignItems 垂直对齐三值VerticalAlign.Top // 顶对齐 VerticalAlign.Center // 居中 VerticalAlign.Bottom // 底对齐3.1 徽章用 Center三段顶部对齐Row() { Text().fontSize(20) Text(最高分: ${this.highScore}).fontSize(14).margin({ left: 6 }) } .alignItems(VerticalAlign.Center)Center让20 字号和文字14 字号垂直居中对齐——视觉基线居中最自然。3.2 三值视觉对比假设 Row 高 40 20 字号文字 14 字号模式文字说明Top顶贴 0顶贴 0都顶对齐但字号不同底部错乱Center居中居中基线居中最自然Bottom底贴 40底贴 40都底对齐顶部错乱实战经验横排混合字号内容图标 文字默认用Center。Top/Bottom只在三段同字号时用。四、margin 子间距的两种控法4.1 单独 margin本项目写法Row() { Text().fontSize(20) Text(最高分: ${this.highScore}).fontSize(14).margin({ left: 6 }) Text(NEW).fontSize(10).margin({ left: 6 }) }每个子元素margin.left: 6单独控间距。优点可以不均匀——NEW标离文字近6离屏边远无 margin。4.2 Row space 统一间距Row({ space: 6 }) { Text().fontSize(20) Text(最高分: ${this.highScore}).fontSize(14) Text(NEW).fontSize(10) }优点简洁所有子元素均 6vp。缺点必须均匀无法让 NEW 离文字更近。4.3 取舍场景推荐三段间距均匀space: 6间距不均匀margin.left单独控首尾不空中间空space 首尾margin.left: 0五、justifyContent 水平排列实战5.1 自然排默认 StartRow() { Text().fontSize(20) Text(最高分: ${this.highScore}).fontSize(14).margin({ left: 6 }) } // justifyContent 不写默认 Start左贴边徽章用自然排——三段从左贴边依次排。5.2 两端贴边SpaceBetweenHUD 底栏三段得分/预告/控制用SpaceBetweenRow() { Text(得分: ${this.score}).fontSize(16) Column() { /* 预告区 */ } Row() { /* 控制按钮组 */ } } .width(100%) .justifyContent(FlexAlign.SpaceBetween) .alignItems(VerticalAlign.Center)SpaceBetween让首尾贴边、中间均分——经典 HUD 三栏。5.3 居中Center加载页加载图标 文字居中Row() { LoadingProgress().width(24).color(#2ECC71) Text(加载中...).fontSize(14).fontColor(#95A5A6).margin({ left: 8 }) } .width(100%) .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center)5.4 六值视觉示意Row 宽 1003 个子元素各宽 10模式左中右说明Start101010首贴左依次排Center351035居中左右空对称End701010尾贴右依次排SpaceBetween0350首尾贴边中间 35SpaceAround17.517.517.5每元素左右空对称SpaceEvenly17.517.517.5含首尾全均分六、完整代码三种横排徽章对比6.1 最高分徽章本项目Row() { Text().fontSize(20) Text(最高分: ${this.highScore}) .fontSize(14).fontColor(#2C3E50).fontWeight(FontWeight.Bold) .margin({ left: 6 }) if (this.isNewHigh) { Text(NEW) .fontSize(10).fontColor(#FFFFFF).backgroundColor(#E74C3C) .borderRadius(4).padding({ left: 4, right: 4, top: 2, bottom: 2 }) .margin({ left: 6 }) } } .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(rgba(255,255,255,0.7)) .borderRadius(16) .alignItems(VerticalAlign.Center) .margin({ bottom: 16 })6.2 HUD 底栏三栏SpaceBetweenRow() { Text(得分: ${this.score}).fontSize(16).fontColor(#2C3E50) Column() { Text(下一个).fontSize(12).fontColor(#95A5A6) Text(this.nextCatEmoji).fontSize(24) }.alignItems(HorizontalAlign.Center) Row() { Button(暂停).width(80).height(40).backgroundColor(#95A5A6) Button(重开).width(80).height(40).backgroundColor(#E74C3C).margin({ left: 8 }) } } .width(100%).padding({ left: 16, right: 16 }) .justifyContent(FlexAlign.SpaceBetween) .alignItems(VerticalAlign.Center)6.3 图标按钮组space 统一Row({ space: 8 }) { Button(暂停) { SymbolGlyph($r(sys.symbol.pause)).fontSize(16).fontColor(Color.White) } .width(40).height(40).backgroundColor(#95A5A6).borderRadius(20) Button(重开) { SymbolGlyph($r(sys.arrow.clockwise)).fontSize(16).fontColor(Color.White) } .width(40).height(40).backgroundColor(#E74C3C).borderRadius(20) Button(设置) { SymbolGlyph($r(sys.gear)).fontSize(16).fontColor(Color.White) } .width(40).height(40).backgroundColor(#2C3E50).borderRadius(20) } .alignItems(VerticalAlign.Center)三个圆形图标按钮均 8vp 间距space最简洁。七、调试技巧横排怎么量加临时 border给Row和子元素都加.border({ width: 1, color: Color.Red })看清边界。justifyContent验 width水平排列不生效Row是否设了width没设宽度内容撑开无空可排。alignItems验字号垂直居中错乱多半是子元素字号差异大——Center解或统一字号。真机看徽章预览器渲染接近真机但 Emoji 字形可能差异以真机为准。八、性能与最佳实践Row比Flex高效不需要 flexGrow/shrink 时用Row单 pass 布局性能优。space比多个margin高效均匀间距用space容器一次算。alignItems默认CenterRow 默认就是垂直居中不写也居中但明确写出更可读。borderRadius别超过高度一半徽章高度 padding.topbottom 内容高 ≈ 28圆角 16 没问题超过 14 视觉像气泡。总结本篇我们从最高分徽章切入掌握Row容器的横排套路、justifyContent水平排列、alignItems垂直对齐、space/margin间距控制四大要点并给出了徽章、HUD 三栏、图标按钮组三种横排布局的完整代码。核心要点横排用 Row垂直对齐 Center均匀间距 space不均匀 margin。下一篇我们将继续主菜单拆解Stack叠层容器的状态页面叠层用法。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源「猫猫大作战」项目源码本仓库entry/src/main/ets/pages/Index.ets线性布局 (Row/Column) 官方指南Row API 参考FlexAlign 枚举开源鸿蒙跨平台社区HarmonyOS 开发者官方文档首页系列索引本仓库articles/INDEX.md