HarmonyOS应用开发实战：萌宠日记 - 宠物档案页布局与头像设计

shao

66人浏览 · 2026-07-21 22:15:14

shao · 2026-07-21 22:15:14 发布

页面预览

前言

宠物档案页 是 萌宠日记 中展示宠物 核心信息 的页面，包含 宠物头像、名称、品种、年龄、基本信息列表、成长记录 等模块。该页面采用 Scroll 嵌套 Column 的布局模式，配合 卡片式设计，将宠物信息清晰、有层次地呈现给用户。

本文将从 萌宠日记 的 PetProfilePage 实现出发，深入解析档案页的头像设计、布局结构、卡片组织，以及如何通过视觉层次突出宠物核心信息。

一、档案页整体布局

1.1 页面结构

┌─────────────────────────────────────┐
│  Scroll (可滚动)                     │
│  ┌─────────────────────────────────┐ │
│  │  ┌───────────────────────────┐  │ │
│  │  │  宠物头部卡片              │  │ │
│  │  │  ┌────┐ ┌──────────────┐  │  │ │
│  │  │  │ 头像│ │  豆豆    ♂  │  │  │ │
│  │  │  │80×80│ │  比熊犬·男孩 │  │  │ │
│  │  │  │     │ │  2岁3个月   │  │  │ │
│  │  │  └────┘ └──────────────┘  │  │ │
│  │  │                       ✏️  │  │ │
│  │  └───────────────────────────┘  │ │
│  │  ┌───────────────────────────┐  │ │
│  │  │  基本信息卡片              │  │ │
│  │  │  生日: 2022-02-14        │  │ │
│  │  │  ───────────────────     │  │ │
│  │  │  到家日: 2022-04-20      │  │ │
│  │  │  ───────────────────     │  │ │
│  │  │  体重: 4.5 kg            │  │ │
│  │  │  ...                     │  │ │
│  │  └───────────────────────────┘  │ │
│  │  ┌───────────────────────────┐  │ │
│  │  │  成长记录卡片              │  │ │
│  │  │  [幼年] [6个月] [1岁] [2岁]│  │ │
│  │  └───────────────────────────┘  │ │
│  └─────────────────────────────────┘ │
└─────────────────────────────────────┘

1.2 核心代码

// PetProfilePage.ets — 档案页布局
@Entry
@Component
export struct PetProfilePage {
  build() {
    Scroll() {
      Column({ space: 16 }) {
        // 1. 宠物头部卡片
        this.PetHeaderCard()

        // 2. 基本信息卡片
        this.BasicInfoCard()

        // 3. 成长记录卡片
        this.GrowthRecordCard()
      }
      .padding({ left: 16, right: 16, top: 16, bottom: 24 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFF8F0')
    .scrollBar(BarState.Off)
  }
}

提示：宠物档案页的布局结构与首页一脉相承，采用 Scroll + Column + 卡片 的模式。每个卡片独立封装为 @Builder，代码清晰、易于维护。

二、宠物头部卡片

2.1 完整实现

// 宠物头部卡片
@Builder
PetHeaderCard() {
  Column() {
    Row({ space: 16 }) {
      // 头像
      Column() {
        Text('')
          .fontSize(48)
      }
      .width(80)
      .height(80)
      .backgroundColor('#FFF3E0')
      .borderRadius(40)
      .justifyContent(FlexAlign.Center)

      // 信息
      Column({ space: 4 }) {
        Row({ space: 8 }) {
          Text('豆豆')
            .fontSize(22)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
          Text('♂')
            .fontSize(12)
            .fontColor('#42A5F5')
            .backgroundColor('#E3F2FD')
            .padding({ left: 6, right: 6, top: 2, bottom: 2 })
            .borderRadius(8)
        }
        Text('比熊犬 · 男孩')
          .fontSize(13)
          .fontColor('#999999')
        Text('2岁3个月')
          .fontSize(13)
          .fontColor('#999999')
      }
      .alignItems(HorizontalAlign.Start)

      Blank()

      Text('✏️')
        .fontSize(20)
        .fontColor('#F5A623')
    }
    .width('100%')
    .padding(16)
  }
  .width('100%')
  .backgroundColor('#FFFFFF')
  .borderRadius(16)
  .shadow({ radius: 4, color: '#10000000', offsetY: 2 })
}

2.2 与首页宠物卡片的对比

对比维度	首页宠物卡片	档案页宠物卡片
头像尺寸	64×64vp	80×80vp（更大）
名称字号	20fp	22fp（更大）
卡片圆角	16vp	16vp（一致）
阴影	有	有（一致）
编辑按钮	有	有（一致）

三、头像尺寸设计

3.1 头像尺寸对比

// 首页头像 — 64×64
Column() {
  Text('').fontSize(40)
}
.width(64).height(64)
.borderRadius(32)

// 档案页头像 — 80×80
Column() {
  Text('').fontSize(48)
}
.width(80).height(80)
.borderRadius(40)

3.2 头像尺寸选择

使用场景	尺寸	borderRadius	说明
首页卡片	64×64	32	紧凑展示
档案页头部	80×80	40	突出展示
个人中心	64×64	32	中等大小
社区动态	36×36	18	小尺寸列表

四、信息布局细节

4.1 信息层级

Column({ space: 4 }) {
  // 第一行：名称 + 性别标签
  Row({ space: 8 }) {
    Text('豆豆').fontSize(22).fontWeight(FontWeight.Bold)
    Text('♂').fontSize(12).fontColor('#42A5F5')
  }

  // 第二行：品种
  Text('比熊犬 · 男孩').fontSize(13).fontColor('#999999')

  // 第三行：年龄
  Text('2岁3个月').fontSize(13).fontColor('#999999')
}
.alignItems(HorizontalAlign.Start)

4.2 信息层级设计

层级	内容	字号	字重	颜色	重要性
第一层	宠物名称	22fp	Bold	深灰	最高
第一层	性别标签	12fp	Normal	蓝色	辅助
第二层	品种 · 性别	13fp	Normal	灰色	中等
第三层	年龄	13fp	Normal	灰色	一般

五、卡片容器设计

5.1 卡片统一样式

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

5.2 卡片间距

// 卡片之间的间距由 Column 的 space 控制
Column({ space: 16 }) {
  this.PetHeaderCard()    // 间距 16vp
  this.BasicInfoCard()    // 间距 16vp
  this.GrowthRecordCard() // 底部 24vp padding
}

六、页面边距

6.1 内外边距

// 整个页面的边距
Scroll() {
  Column({ space: 16 }) {
    // 卡片...
  }
  .padding({ left: 16, right: 16, top: 16, bottom: 24 })
}

边距位置	值	说明
左右边距	16vp	与屏幕边缘距离
顶部边距	16vp	与导航栏距离
底部边距	24vp	底部留白，避免贴底
卡片间距	16vp	卡片之间的间距

七、头像图片加载

7.1 真实图片加载

// 使用 Image 组件加载真实头像
Column() {
  Image($r('app.media.pet_avatar'))
    .width(80)
    .height(80)
    .borderRadius(40)
    .objectFit(ImageFit.Cover)  // 裁剪填充，保持比例
    .onLoad(() => {
      console.log('Avatar loaded')
    })
    .onError(() => {
      // 加载失败显示占位 Emoji
      Text('🐶').fontSize(48)
    })
}

7.2 图片加载策略

策略	说明	实现
占位图	加载时显示默认头像	Emoji 占位
缓存	避免重复加载	Image 组件默认缓存
错误处理	加载失败显示备选	onError 回调
裁剪模式	保持比例裁剪	objectFit: Cover

八、响应式适配

8.1 不同屏幕适配

// 根据屏幕宽度调整卡片样式
@StorageProp('screenWidth') screenWidth: number = 360

getCardPadding(): number {
  return this.screenWidth >= 600 ? 24 : 16
}

getAvatarSize(): number {
  return this.screenWidth >= 600 ? 100 : 80
}

8.2 适配方案

屏幕宽度	头像尺寸	卡片内边距	字号
< 360vp	72×72	12vp	20fp
360-414vp	80×80	16vp	22fp
414-600vp	88×88	20vp	24fp
> 600vp	100×100	24vp	26fp

九、无障碍适配

9.1 头像无障碍

Column() {
  Image($r('app.media.pet_avatar'))
    .width(80).height(80).borderRadius(40)
}
.accessibilityText('宠物头像：豆豆')

9.2 页面无障碍

// 为整个卡片添加无障碍描述
Column() {
  // 卡片内容...
}
.accessibilityText('宠物信息卡片，名称豆豆，品种比熊犬，年龄2岁3个月')

十、最佳实践

10.1 设计原则

有序列表 — 档案页设计的 5 个原则：

头像突出：宠物头像在页面上方，尺寸适中，一目了然
信息分层：名称 > 品种 > 年龄，按重要性递减排列
卡片统一：所有卡片使用相同的圆角、阴影、背景色
间距合理：卡片间距 16vp，内边距 16vp，视觉舒适
可编辑提示：编辑按钮使用铅笔图标，位置在右上角

10.2 萌宠日记档案页设计总结

设计要素	值	说明
头像尺寸	80×80vp	比首页大，突出显示
名称字号	22fp Bold	页面最突出的文字
卡片圆角	16vp	统一圆角风格
卡片阴影	radius: 4, offsetY: 2	轻微阴影
页面背景	`#FFF8F0`	暖白色
卡片背景	`#FFFFFF`	纯白色
左右边距	16vp	统一标准

总结

本文从 萌宠日记 的 宠物档案页 布局实现出发，深入解析了档案页设计的完整方法：

页面结构：Scroll + Column + 三张卡片
头部卡片：80×80 圆形头像 + 名称 + 品种 + 年龄
头像尺寸：不同场景使用不同尺寸（64/80/36）
信息层级：三级信息展示，字号和颜色区分重要性
卡片容器：统一圆角、阴影、背景色
页面边距：16vp 标准边距，视觉舒适
图片加载：占位图、缓存、错误处理
响应式适配：不同屏幕尺寸的自适应方案

宠物档案页是萌宠日记中信息展示最集中的页面之一，卡片式布局和信息分层设计为用户提供了清晰的数据浏览体验。

下一篇我们将深入 基本信息列表与 Divider 分隔线，解析档案页中基本信息列表的实现。

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

相关资源：

Scroll 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll
Column 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column
Row 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row
Image 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image
阴影属性：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-shadow-effect
圆角边框：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-border
响应式布局：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/responsive-layout
无障碍开发：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit

HarmonyOS开发者社区

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

更多推荐

HarmonyOS 6.1 跨端开发进阶：ArkUI-X从“一次开发”到“多端部署”的实战

Web容器（Cordova/WebView）：体验差，性能低，只是网页套壳。自绘引擎（React Native/Flutter）：性能好，但生态割裂，调试困难，包体积大。ArkUI-X（鸿蒙原生跨端）：基于鸿蒙原生渲染引擎，共享核心代码，保留平台特性，是真正的“一次开发，多端部署”。核心价值代码复用率90%+：业务逻辑、UI布局、状态管理完全复用。原生性能：不使用WebView，直接调用Skia渲