企业官网建设流程全解析

前言

主菜单的标题、按钮是「原子元素」，但一个完整界面需要把多个原子组织成卡片。在 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的卡片规格拆解：

关键经验：卡片圆角（12）< 按钮圆角（28），子元素左对齐而非居中，底色用半透明而非纯白——四个细节让卡片「浮」得克制不抢戏。

二、Column 容器核心属性速览

参考 线性布局 (Row/Column) 官方指南。Column是垂直线性容器，子元素自上而下排列。

2.1 本篇用到的属性清单

2.2 Column vs 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 卡片底色推荐色板

五、borderRadius 圆角的克制

.borderRadius(12)

卡片圆角12vp是主流 sweet spot。对比按钮圆角：

关键经验：卡片圆角别超过 20，否则像「气泡」不像「卡片」。8–16 是甜区。

5.1 分角圆角

.borderRadius({ topLeft: 12, topRight: 12, bottomLeft: 0, bottomRight: 0 })

只圆顶部两角，底部方角——适合「底部紧贴导航栏」的卡片。本项目没用，但实战中常见。

六、alignItems 子对齐的视觉语义

.alignItems(HorizontalAlign.Start)

三种对齐对应三种视觉语义：

规则面板用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)+ 红字标题，视觉语义明确。

八、调试技巧：卡片怎么量尺寸

1. 临时加 border：.border({ width: 1, color: Color.Red })看清卡片占框，调完去掉。
2. width用百分比：响应式，但父容器宽度要先确定。本项目主菜单Column是 100% 屏宽，规则卡片 80% 即 8 成屏宽。
3. height不设：让内容撑开高度，避免内容多了被裁。
4. 预览器看圆角：DevEco 预览器圆角渲染接近真机，可放心调。

九、性能与最佳实践

1. padding别小于 12：内容贴边显得拥挤，16 是甜区。
2. borderRadius别超过 20：卡片不是气泡，8–16 是甜区。
3. 半透明底色注意可读性：rgba(255,255,255,0.7)透 0.3 背景色，如果背景太花，卡片内文字可能不清。实测不清就把 0.7 调到 0.85 或纯白。
4. alignItems与子元素width协同：卡片alignItems(Start)时，子Text默认宽度是内容宽度；想让规则行铺满卡片宽度，给子Text加.width('100%')。

总结

本篇我们从规则面板切入，掌握Column容器的padding、backgroundColor、borderRadius、alignItems四大卡片化属性，并给出了规则、统计、警告三种视觉语义的完整代码。核心要点：圆角 12 比 28 克制，半透明白底浮起感，左对齐是阅读型，纯白+阴影是焦点型。

下一篇我们将继续主菜单，拆解整体竖向布局的Column+Spacer占位，把space、justifyContent、Spacer/Blank间距控制讲透。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• 「猫猫大作战」项目源码：本仓库entry/src/main/ets/pages/Index.ets
• 线性布局 (Row/Column) 官方指南
• Column API 参考
• Row API 参考
• 开源鸿蒙跨平台社区
• HarmonyOS 开发者官方文档首页
• ArkUI 布局开发指南
• 系列索引：本仓库articles/INDEX.md