HarmonyOS应用开发实战：猫猫大作战-`Column` 容器的卡片化套路

前言主菜单的标题、按钮是「原子元素」但一个完整界面需要把多个原子组织成卡片。在 HarmonyOS 里Column垂直线性容器是最常用的卡片骨架——它把若干子元素自上而下排列并通过padding、backgroundColor、borderRadius、alignItems四个属性把自身装扮成一张「浮在背景上的圆角白卡片」。本篇以「猫猫大作战」主菜单的游戏规则面板为锚点把Column容器的卡片化套路讲透。读完本篇你将能独立写出圆角白底卡片、内容左对齐卡片、带阴影浮起卡片并为后续第 5 篇的「Column 整体竖向布局」打好基础。提示本系列不讲 ArkTS 基础语法与环境搭建假设你已跟完第 1–3 篇。一、场景拆解规则面板的卡片规格打开entry/src/main/ets/pages/Index.ets的MainMenuView找到规则面板// 来源entry/src/main/ets/pages/Index.ets MainMenuView() Column() { Text(游戏规则) .fontSize(14) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) .margin({ bottom: 8 }) Text(• 点击列投放猫咪) .fontSize(13) .fontColor(#7F8C8D) .margin({ bottom: 4 }) Text(• 相邻同级猫咪自动合并升级) .fontSize(13) .fontColor(#7F8C8D) .margin({ bottom: 4 }) Text(• 连续合并触发连击加分) .fontSize(13) .fontColor(#7F8C8D) .margin({ bottom: 4 }) Text(• 猫咪堆到顶部则游戏结束) .fontSize(13) .fontColor(#7F8C8D) } .width(80%) .padding(16) .backgroundColor(rgba(255,255,255,0.7)) .borderRadius(12) .alignItems(HorizontalAlign.Start)这个Column的卡片规格拆解维度取值作用宽度80%占父容器 8 成两侧留白内边距16vp内容与卡片边的呼吸空间底色rgba(255,255,255,0.7)半透明白盖在渐变蓝背景上显浮起圆角12vp比按钮圆角小卡片更克制子对齐HorizontalAlign.Start规则是阅读型内容左对齐关键经验卡片圆角12 按钮圆角28子元素左对齐而非居中底色用半透明而非纯白——四个细节让卡片「浮」得克制不抢戏。二、Column 容器核心属性速览参考 线性布局 (Row/Column) 官方指南。Column是垂直线性容器子元素自上而下排列。2.1 本篇用到的属性清单属性类型作用本篇取值spacenumber子元素之间的统一间距未用用 margin 单独控widthstring | number容器宽度80%heightstring | number容器高度不设内容撑开paddingPadding | number内边距16backgroundColorstring | Color背景色rgba(255,255,255,0.7)borderRadiusnumber圆角12alignItemsHorizontalAlign 枚举子元素水平对齐StartjustifyContentFlexAlign 枚举子元素垂直排列未用内容自上而下2.2 Column vs Row 主轴方向容器主轴交叉轴alignItems控justifyContent控Column垂直 ↓水平 ↔水平对齐垂直排列Row水平 ↔垂直 ↓垂直对齐水平排列易错点在Column里用justifyContent(FlexAlign.Center)是让子元素垂直居中上下留白均分不是水平居中。水平居中要靠alignItems(HorizontalAlign.Center)。2.3 HorizontalAlign 三值HorizontalAlign.Start // 左对齐 HorizontalAlign.Center // 居中 HorizontalAlign.End // 右对齐规则面板用Start因为规则是阅读型内容左对齐扫读效率最高。主菜单整体用Center因为标题、按钮是焦点元素居中显眼。三、padding 内边距的两种写法3.1 统一值本项目写法.padding(16) // 上下左右均 16vp最简洁适合内容对称的卡片。3.2 分边指定.padding({ top: 20, right: 16, bottom: 16, left: 16 })关键经验标题区padding.top常比bottom大20 vs 16因为标题上方要更多呼吸空间按钮区反之bottom常比top大。提示padding是内边距margin是外边距。卡片背景色会覆盖padding区域但不会覆盖margin区域。要让圆角白底卡片四周都有白底用padding要让卡片与相邻元素拉距离用margin。四、backgroundColor 半透明的浮起感.backgroundColor(rgba(255,255,255,0.7))为什么用半透明白而不是纯白主菜单整体有浅蓝渐变背景卡片用纯白#FFFFFF会显得「贴死」在上面用 0.7 透明度的白背景的浅蓝会从卡片下方隐隐透上来卡片「浮」在背景上的层次感就出来了。4.1 颜色字符串三种格式.backgroundColor(#FFFFFF) // 纯白16 进制 .backgroundColor(rgba(255,255,255,0.7)) // 半透明白rgba .backgroundColor(Color.White) // 系统枚举何时用哪个#RRGGBB默认选择最简洁。rgba(r,g,b,a)需要透明度时a取 0–1。Color.*枚举只用系统预定义色Red、White、Black 等自定义色必须用字符串。4.2 卡片底色推荐色板场景推荐色说明浅色背景上的卡片rgba(255,255,255,0.7)半透明白浮起感深色背景上的卡片rgba(0,0,0,0.5)半透明黑下沉感信息卡片#F8F9F9浅灰低调警告卡片rgba(231,76,60,0.1)红色 0.1淡红底五、borderRadius 圆角的克制.borderRadius(12)卡片圆角12vp是主流 sweet spot。对比按钮圆角元素圆角高度视觉开始按钮2856完美胶囊规则卡片12内容撑开小圆角矩形关键经验卡片圆角别超过 20否则像「气泡」不像「卡片」。8–16 是甜区。5.1 分角圆角.borderRadius({ topLeft: 12, topRight: 12, bottomLeft: 0, bottomRight: 0 })只圆顶部两角底部方角——适合「底部紧贴导航栏」的卡片。本项目没用但实战中常见。六、alignItems 子对齐的视觉语义.alignItems(HorizontalAlign.Start)三种对齐对应三种视觉语义对齐语义适用Start左阅读型扫读效率高规则、说明、列表项Center中焦点型显眼标题、按钮、图标End右数字型对齐数字价格、得分、统计规则面板用Start因为 5 行规则是阅读型内容。如果误用Center每行长度不一居中后视觉错乱。七、完整代码三种卡片样式对比7.1 规则卡片本项目当前写法Column() { Text(游戏规则) .fontSize(14) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) .margin({ bottom: 8 }) Text(• 点击列投放猫咪) .fontSize(13) .fontColor(#7F8C8D) .margin({ bottom: 4 }) // ... 其余 3 条规则 } .width(80%) .padding(16) .backgroundColor(rgba(255,255,255,0.7)) .borderRadius(12) .alignItems(HorizontalAlign.Start)7.2 统计卡片带阴影浮起Column() { Text(本局统计) .fontSize(14) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) .margin({ bottom: 12 }) Row() { Text(得分).fontSize(12).fontColor(#7F8C8D).layoutWeight(1) Text(最高分).fontSize(12).fontColor(#7F8C8D).layoutWeight(1) Text(用时).fontSize(12).fontColor(#7F8C8D).layoutWeight(1) }.margin({ bottom: 8 }) Row() { Text(${this.score}).fontSize(20).fontColor(#2ECC71).layoutWeight(1) Text(${this.highScore}).fontSize(20).fontColor(#2ECC71).layoutWeight(1) Text(${this.formatTime()}).fontSize(20).fontColor(#2ECC71).layoutWeight(1) } } .width(80%) .padding(16) .backgroundColor(#FFFFFF) .borderRadius(12) .shadow({ radius: 8, color: rgba(0,0,0,0.1), offsetY: 2 }) .alignItems(HorizontalAlign.Start)统计卡片 vs 规则卡片差异底色纯白#FFFFFF统计要清晰vs 半透明白规则要低调阴影有shadow浮起显重要vs 无融入背景内部用Row横排三列数据 vs 纯Text竖排7.3 警告卡片淡红底Column() { Text(⚠ 注意) .fontSize(14) .fontWeight(FontWeight.Bold) .fontColor(#E74C3C) .margin({ bottom: 8 }) Text(猫咪堆到第 2 行即游戏结束请及时合并。) .fontSize(13) .fontColor(#7F8C8D) } .width(80%) .padding(16) .backgroundColor(rgba(231,76,60,0.1)) .borderRadius(12) .alignItems(HorizontalAlign.Start)警告卡片用淡红底rgba(231,76,60,0.1) 红字标题视觉语义明确。八、调试技巧卡片怎么量尺寸临时加 border.border({ width: 1, color: Color.Red })看清卡片占框调完去掉。width用百分比响应式但父容器宽度要先确定。本项目主菜单Column是 100% 屏宽规则卡片 80% 即 8 成屏宽。height不设让内容撑开高度避免内容多了被裁。预览器看圆角DevEco 预览器圆角渲染接近真机可放心调。九、性能与最佳实践padding别小于 12内容贴边显得拥挤16 是甜区。borderRadius别超过 20卡片不是气泡8–16 是甜区。半透明底色注意可读性rgba(255,255,255,0.7)透 0.3 背景色如果背景太花卡片内文字可能不清。实测不清就把 0.7 调到 0.85 或纯白。alignItems与子元素width协同卡片alignItems(Start)时子Text默认宽度是内容宽度想让规则行铺满卡片宽度给子Text加.width(100%)。总结本篇我们从规则面板切入掌握Column容器的padding、backgroundColor、borderRadius、alignItems四大卡片化属性并给出了规则、统计、警告三种视觉语义的完整代码。核心要点圆角 12 比 28 克制半透明白底浮起感左对齐是阅读型纯白阴影是焦点型。下一篇我们将继续主菜单拆解整体竖向布局的ColumnSpacer占位把space、justifyContent、Spacer/Blank间距控制讲透。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源「猫猫大作战」项目源码本仓库entry/src/main/ets/pages/Index.ets线性布局 (Row/Column) 官方指南Column API 参考Row API 参考开源鸿蒙跨平台社区HarmonyOS 开发者官方文档首页ArkUI 布局开发指南系列索引本仓库articles/INDEX.md