页面预览

前言

卡片式布局 是 萌宠日记 中最核心的 UI 设计模式。从首页的 宠物信息卡片、今日记录卡片、健康提醒卡片，到宠物档案页的 基本信息卡片、成长记录卡片，再到社区页的 活动横幅卡片、帖子卡片 — 整个应用中有 10 余处 使用了卡片式设计。

本文将从 萌宠日记 中所有卡片的使用出发，深入解析卡片组件的复用模式、通用样式封装、差异化配置，以及如何通过组件化设计实现"一处定义、多处复用"。

一、卡片使用全景

1.1 所有卡片清单

页面卡片名称用途关键差异化
首页宠物信息卡片展示宠物头像和信息头像 64×64，有编辑按钮
首页今日记录卡片展示日记摘要有缩略图，文本截断
首页健康提醒卡片健康事项列表列表项，有倒计时
档案页头部卡片宠物头像和信息头像 80×80，更大
档案页基本信息卡片标签-值列表有 Divider 分隔线
档案页成长记录卡片成长阶段网格4 列网格布局
社区活动横幅卡片活动推广按钮 + 文案
社区帖子卡片用户动态头像 + 正文 + 图片
统计日记数量卡片统计数据柱状图 + 数字
统计心情分布卡片饼图 + 图例图表 + 百分比
统计活动统计卡片活动次数图标 + 数字

1.2 卡片通用样式

// 所有卡片的通用样式
// 背景色：白色
// 圆角：16vp
// 阴影：轻微
// 内边距：16vp

// 统一的卡片容器
Column() {
  // 卡片内容
}
.width('100%')
.backgroundColor('#FFFFFF')
.borderRadius(16)
.shadow({ radius: 4, color: '#10000000', offsetY: 2 })

提示：萌宠日记中所有卡片都遵循 白色背景 + 16vp 圆角 + 轻微阴影 的统一视觉规范。但部分卡片（如今日记录卡片、健康提醒卡片）没有使用阴影，以保持视觉层次上的区分。

二、通用卡片组件封装

2.1 基础卡片组件

// 通用卡片组件
@Component
export struct Card {
  @Prop backgroundColor: string = '#FFFFFF'
  @Prop borderRadius: number = 16
  @Prop paddingValue: number = 16
  @Prop hasShadow: boolean = true

  build() {
    Column() {
      // 卡片内容通过 @BuilderParam 传入
      if (this.content) {
        this.content()
      }
    }
    .width('100%')
    .backgroundColor(this.backgroundColor)
    .borderRadius(this.borderRadius)
    .padding(this.paddingValue)
    .shadow(
      this.hasShadow
        ? { radius: 4, color: '#10000000', offsetY: 2 }
        : undefined
    )
  }

  @BuilderParam content?: () => void
}

2.2 使用示例

// 使用通用卡片组件
Card({ paddingValue: 16 }) {
  Column({ space: 12 }) {
    Text('基本信息').fontSize(16).fontWeight(FontWeight.Bold)
    // 列表内容...
  }
}

三、卡片组件参数化

3.1 参数设计

interface CardConfig {
  backgroundColor?: string    // 背景色，默认白色
  borderRadius?: number       // 圆角，默认 16
  paddingValue?: number       // 内边距，默认 16
  hasShadow?: boolean         // 是否有阴影，默认 true
  marginValue?: Margin        // 外边距
  onClick?: () => void        // 点击事件
}

3.2 不同卡片的配置

卡片backgroundColorborderRadiushasShadowpaddingValue
宠物信息卡片白色16true16
今日记录卡片白色12false16
健康提醒卡片白色12false16
活动横幅卡片白色16true16
统计卡片白色16true16
帖子卡片白色16true16

四、卡片内容的复用

4.1 标题行复用

// 卡片标题行 — 多处复用
@Builder
CardTitle(title: string, action?: { label: string, onClick: () => void }) {
  Row() {
    Text(title)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .fontColor('#333333')
    Blank()
    if (action) {
      Text(action.label)
        .fontSize(14)
        .fontColor('#F5A623')
        .onClick(action.onClick)
    }
  }
  .width('100%')
}

4.2 使用示例

// 基本信息卡片
Column({ space: 12 }) {
  CardTitle('基本信息')
  // 列表内容...
}

// 健康提醒卡片
Column({ space: 12 }) {
  CardTitle('健康提醒', { label: '+', onClick: () => {} })
  // 提醒列表...
}

// 统计卡片
Column({ space: 12 }) {
  CardTitle('日记数量')
  // 统计内容...
}

五、卡片内边距与外边距

5.1 边距分类

// 卡片内边距 — 内容与卡片边框的距离
.padding(16)

// 卡片外边距 — 卡片与周围元素的距离
.margin({ left: 16, right: 16, bottom: 16 })

5.2 边距规范

边距类型默认值说明
卡片内边距16vp内容与卡片边框
卡片左右外边距16vp卡片与屏幕边缘
卡片上下间距16vp卡片之间的垂直间距
标题与内容间距12vp卡片内标题与内容的间距

六、卡片阴影策略

6.1 阴影使用场景

// 有阴影的卡片 — 突出显示
.shadow({ radius: 4, color: '#10000000', offsetY: 2 })
// 宠物信息卡片、活动横幅、统计卡片、帖子卡片

// 无阴影的卡片 — 内容展示
// 今日记录卡片、健康提醒卡片

6.2 阴影设计原则

卡片类型阴影设计意图
独立卡片有阴影从页面背景中突出
列表项卡片无阴影减少视觉噪点
嵌套卡片无阴影避免阴影叠加

七、卡片布局的组件化

7.1 组件拆分

CardContainer（卡片容器）
├── CardTitle（标题行）
├── CardContent（内容区）
│   ├── InfoList（信息列表）
│   ├── GridLayout（网格布局）
│   └── ChartContent（图表内容）
└── CardFooter（底部操作区）

7.2 组件复用关系

// 宠物档案页 = CardContainer + CardTitle + InfoList
// 统计页 = CardContainer + CardTitle + ChartContent
// 社区页 = CardContainer + CardTitle + PostContent

八、卡片复用收益

8.1 代码量对比

实现方式代码量维护成本一致性
重复编写每条卡片 15-20 行高低
组件封装基础组件 30 行 + 使用 5 行低高

8.2 复用统计

复用维度复用次数说明
卡片容器样式10+ 次所有卡片
标题行组件6+ 次带标题的卡片
阴影配置5+ 次独立卡片
16vp 内边距10+ 次所有卡片

九、卡片性能优化

9.1 渲染性能

优化策略说明
避免嵌套过深卡片容器嵌套不超过 3 层
使用 @Builder 复用避免重复创建组件实例
条件渲染阴影等属性按需渲染
轻量组件卡片内容使用轻量组件

9.2 卡片在列表中的性能

// 在列表中使用卡片时，使用 LazyForEach 优化
LazyForEach(this.cardData, (item: CardData) => {
  ListItem() {
    Card({ hasShadow: true }) {
      // 卡片内容
    }
  }
}, (item: CardData) => item.id)

十、最佳实践

10.1 卡片设计原则

有序列表 — 卡片设计的 5 个原则：

  1. 统一视觉规范：所有卡片使用相同的背景色、圆角、阴影风格
  2. 组件化封装：将卡片容器封装为通用组件，减少重复代码
  3. 参数化配置：通过参数控制卡片样式差异（阴影、圆角、内边距）
  4. 内容与容器分离：卡片容器只负责样式，内容由 @BuilderParam 传入
  5. 差异化恰到好处：不同卡片在统一风格下保留差异化特征

10.2 萌宠日记卡片复用总结

卡片类型容器标题内容阴影
宠物信息卡片Card无头像 + 信息✅
今日记录卡片CardCardTitle文本 + 缩略图❌
健康提醒卡片CardCardTitle列表项❌
基本信息卡片CardCardTitle标签-值列表✅
成长记录卡片CardCardTitle网格布局✅
活动横幅卡片Card无文案 + 按钮✅
帖子卡片Card无头像 + 正文 + 图片✅
统计卡片CardCardTitle图表 + 数字✅

总结

本文从 萌宠日记 的 卡片式布局复用 出发，深入解析了卡片组件化的完整方法：

  1. 卡片全景：10+ 处卡片使用，覆盖所有主要页面
  2. 通用组件封装：Card 组件 + @BuilderParam 内容插槽
  3. 参数化配置：backgroundColor、borderRadius、hasShadow 等
  4. 标题行复用：CardTitle Builder 复用 6+ 次
  5. 边距规范：统一的 16vp 内边距和外边距
  6. 阴影策略：独立卡片有阴影，列表项无阴影
  7. 组件拆分：CardContainer → CardTitle → CardContent
  8. 复用收益：减少代码量、提升一致性、降低维护成本

卡片式布局的组件化复用，是萌宠日记保持 UI 一致性和开发效率的关键设计模式。

下一篇我们将深入 宠物信息数据结构设计，解析宠物数据模型的设计与演进。

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

相关资源：

# 后端
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

【开发者故事】基于小艺开放平台构建智能体，奇妙工具箱装上 “AI 大脑“

avatar HarmonyOS开发者社区

『速通攻略』通过DevEco Studio插件快速集成鸿蒙生态伙伴SDK

是鸿蒙生态伙伴SDK资源核心阵地，整合产业链资源，赋能鸿蒙应用开发者，帮助开发者快速获取能力，简化选型流程，降低接入成本，提速应用开发。DevEco Studio左侧导航栏“More tool windows”—“鸿蒙生态伙伴SDK市场”或“Partner SDK”。支持一键添加SDK至工程，快速集成。DevEco Studio上方导航栏“工具”—“鸿蒙生态伙伴SDK市场”或“Partner SD

avatar HarmonyOS开发者社区
cover

基于小熊派hi3863开发鸿蒙手机控制蜂鸣器

avatar HarmonyOS开发者社区