HarmonyOS应用开发实战：萌宠日记 - 统计卡片统一风格

HarmonyOS应用开发实战萌宠日记 - 统计卡片统一风格前言统计卡片统一风格是数据统计页面保持视觉一致性的关键设计。在萌宠日记的StatisticsPage中所有统计卡片日记数量、心情分布、活动统计都采用相同的白色背景、16vp 圆角、轻微阴影、16vp 内边距确保用户在不同统计项之间切换时获得一致的视觉体验。这种组件化设计不仅提升了 UI 一致性还大幅减少了代码重复。本文将从萌宠日记中统计卡片统一风格的实现出发深入解析卡片样式规范、组件化封装、Builder 复用以及风格一致性的设计原则。一、统计卡片现状1.1 三张统计卡片萌宠日记的统计页面包含三张统计卡片卡片名称展示内容核心组件数据源日记数量本月记录数 柱状图Text ColumnState diaryCount心情分布心情占比 图例Circle TextState moodStats活动统计活动次数 图标Column TextState activityStats1.2 当前代码中的重复样式// 日记数量卡片 Column({ space: 8 }) { // 内容... } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .padding(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 }) // 心情分布卡片重复的样式代码 Column({ space: 12 }) { // 内容... } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .padding(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 }) // 活动统计卡片再次重复 Column({ space: 12 }) { // 内容... } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .padding(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 })提示三张卡片的样式代码完全重复这是典型的代码冗余问题。通过组件化封装可以消除重复提升可维护性。二、统计卡片统一样式规范2.1 样式规范// 统计卡片的统一风格定义 const CARD_STYLE { backgroundColor: #FFFFFF, // 白色背景 borderRadius: 16, // 16vp 圆角 padding: 16, // 16vp 内边距 shadow: { radius: 4, color: #10000000, offsetY: 2 }, // 轻微阴影 titleSize: 16, // 标题字号 titleWeight: FontWeight.Bold, // 标题字重 titleColor: #333333 // 标题颜色 }2.2 样式属性详解属性值作用backgroundColor#FFFFFF白色与页面背景#FFF8F0形成对比borderRadius16vp柔和圆角与全局卡片风格一致padding16vp内容与卡片边缘的呼吸空间shadow.radius4轻微模糊增加层次感shadow.color#1000000010% 透明度的黑色阴影柔和shadow.offsetY2向下偏移模拟自然光照三、Builder 封装复用3.1 卡片容器 Builder// 统计卡片容器 — 统一样式封装 Builder StatCard(title: string, content: () void) { Column({ space: 12 }) { // 统一标题 Text(title) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) .width(100%) // 自定义内容区 content() } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .padding(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 }) }3.2 使用卡片容器// 使用统一卡片容器 Scroll() { Column({ space: 16 }) { // 日记数量卡片 this.StatCard(日记数量, () { this.DiaryCountContent() }) // 心情分布卡片 this.StatCard(心情分布, () { this.MoodDistributionContent() }) // 活动统计卡片 this.StatCard(活动统计, () { this.ActivityStatsContent() }) } .padding({ left: 16, right: 16, top: 16, bottom: 24 }) }四、Component 组件化封装4.1 通用卡片组件Component export struct StatCard { Prop title: string Prop paddingValue: number 16 BuilderParam content: () void () {} build() { Column({ space: 12 }) { // 标题行 Text(this.title) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) .width(100%) // 内容区 if (this.content) { this.content() } } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .padding(this.paddingValue) .shadow({ radius: 4, color: #10000000, offsetY: 2 }) } }4.2 组件使用示例// 日记数量卡片 StatCard({ title: 日记数量 }) { Row() { Column({ space: 4 }) { Text(本月记录).fontSize(13).fontColor(#999999) Row({ space: 4 }) { Text(18).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#333333) Text(篇).fontSize(14).fontColor(#666666) } Text(比上月 6篇).fontSize(12).fontColor(#4CAF50) } Blank() // 柱状图 Row({ space: 4 }) { ForEach([3, 5, 4, 7, 6, 8, 5], (h: number) { Column().width(16).height(h * 8).backgroundColor(#F5A623).borderRadius(4) }) } .alignItems(VerticalAlign.Bottom).height(64) } .width(100%) }五、卡片标题统一规范5.1 标题样式规范// 所有统计卡片标题使用相同样式 Text(日记数量) .fontSize(16) // 16fp 标准标题字号 .fontWeight(FontWeight.Bold) // 加粗 .fontColor(#333333) // 深灰色 .width(100%) // 撑满宽度5.2 标题与内容间距Column({ space: 12 }) { // 标题与内容间距 12vp Text(日记数量) // 标题 .fontSize(16).fontWeight(FontWeight.Bold) // 内容区... }六、卡片内容区的差异化设计6.1 各卡片内容差异卡片内容布局差异化参数日记数量Row 左右分布左边数字 右边柱状图心情分布Row 左右分布左边饼图占位 右边图例活动统计Row 三列等宽layoutWeight(1) 等分6.2 差异化通过 BuilderParam 实现// 相同容器 不同内容 卡片复用 StatCard({ title: 日记数量 }) { this.DiaryContent() } StatCard({ title: 心情分布 }) { this.MoodContent() } StatCard({ title: 活动统计 }) { this.ActivityContent() }七、卡片间距控制7.1 卡片之间的间距// 卡片之间的间距由外层 Column 的 space 控制 Column({ space: 16 }) { // 卡片间距 16vp StatCard({ title: 日记数量 }) { ... } StatCard({ title: 心情分布 }) { ... } StatCard({ title: 活动统计 }) { ... } }八、卡片组件封装收益8.1 代码量对比实现方式每张卡片代码量总代码量维护成本重复编写8 行样式 内容24 行样式 3×内容高Builder 封装0 行样式8 行样式 (Builder)低Component 封装0 行样式20 行组件最低8.2 一致性收益视觉统一所有卡片使用完全相同的样式参数修改方便修改一处 Builder 或 Component所有卡片自动更新扩展简单新增统计卡片只需调用 StatCard 组件九、卡片阴影策略9.1 阴影与视觉层次// 统计卡片使用阴影突出 .shadow({ radius: 4, color: #10000000, offsetY: 2 }) // 背景卡片不使用阴影对比 // 内嵌卡片不使用阴影主要特点统计卡片使用阴影从页面背景中突出列表项不使用阴影保持视觉简洁阴影参数统一确保一致性9.2 萌宠日记中的阴影使用场景使用场景阴影配置设计意图统计卡片radius: 4, offsetY: 2从页面背景中突出宠物信息卡片radius: 4, offsetY: 2与统计卡片一致活动横幅卡片radius: 4, offsetY: 2突出推广内容列表项卡片无阴影保持视觉简洁内嵌卡片无阴影避免阴影叠加十、卡片内容的可访问性10.1 无障碍适配// 为统计卡片添加无障碍描述 StatCard({ title: 日记数量 }) { Column() .accessibilityText(日记数量统计卡片本月共18篇日记比上月增加6篇) }10.2 颜色对比度检查统计卡片中的颜色对比度需满足 WCAG 标准颜色组合用途对比度是否达标#FFFFFF背景 #333333文字标题10.6:1✅#FFFFFF背景 #999999文字辅助信息4.5:1✅#F5A623柱状图 #FFFFFF背景图表3.2:1⚠️ 边缘十一、卡片组件的测试11.1 单元测试// 统计卡片组件的测试用例 describe(StatCard, () { it(should render title correctly, () { // 验证标题显示 }) it(should render content correctly, () { // 验证内容渲染 }) it(should apply correct styles, () { // 验证样式应用 }) })十二、从设计稿到代码的映射12.1 设计稿规范设计稿规范代码实现对应属性卡片背景 #FFFFFFbackgroundColor(#FFFFFF)背景色圆角 16pxborderRadius(16)圆角阴影 Y:2, Blur:4shadow({ radius: 4, offsetY: 2 })阴影内边距 16pxpadding(16)内边距标题 16px BoldfontSize(16).fontWeight(Bold)标题12.2 设计与开发协同设计稿使用与代码一致的命名规范设计标注的数值单位与代码的 vp 保持一致设计稿提供明暗两种模式的卡片样式十、最佳实践10.1 卡片设计原则有序列表 — 卡片统一风格设计的 5 个原则统一容器样式所有同类型卡片使用相同的背景、圆角、阴影、内边距组件化封装使用 Builder 或 Component 封装卡片容器内容差异化通过 BuilderParam 插槽实现内容差异化统一标题规范所有卡片标题使用相同的字号、字重、颜色间距统一卡片内外间距保持一致10.2 萌宠日记统计卡片规范总结设计要素规范值说明背景色#FFFFFF白色圆角16vp统一圆角内边距16vp统一内边距阴影radius: 4, offsetY: 2轻微阴影标题字号16fp加粗标题颜色#333333深灰色标题-内容间距12vpColumn space卡片间距16vp外层 Column space总结本文从萌宠日记的统计卡片统一风格实现出发深入解析了卡片风格统一的完整方案样式规范白色背景 16vp 圆角 阴影 16vp 内边距Builder 封装通过 Builder 函数复用卡片容器Component 封装通用 StatCard 组件 BuilderParam 内容插槽标题统一16fp 加粗深灰色标题内容差异化相同容器不同内容通过参数化实现间距控制卡片内外间距统一封装收益减少代码量、提升一致性、降低维护成本通过组件化封装萌宠日记的统计页面实现了一处修改、处处生效的高效开发模式三张卡片在保持统一视觉风格的同时又能灵活展示不同的统计内容。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Builder 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builderBuilderParam 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builderparamComponent 自定义组件https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-components阴影属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-shadow-effect卡片设计指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-cards组件化设计https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/component-based-design布局基础https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layout开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net