【鸿蒙HarmonyOS Next App实战开发】卡片工坊应用技术实践

卡片工坊卡片工坊是一款卡片制作应用，支持文字卡片与图片卡片。

一、主要功能

1.文字卡片

1）提供流光文字卡片、备忘录卡片、手写卡片、书摘卡片、透明卡片、深色文字卡片、浅色文字卡片、结构卡片等多种模板

2）内置名言库，含时光感悟、励志前行、学习成长、生活美学四个分类

3）支持个性化贴纸功能

2.图片卡片

1）提供风景、宠物、日签海报、摄影日志、手账拼贴、每日金句等模板

2）支持添加照片、调整字体、添加文字

3.名片功能

1）支持创建个人名片。卡片工坊适合需要制作个性化卡片的用户，提供从文字到图片的制作能力。

应用下载地址：

https://appgallery.huawei.com/app/detail?id=com.liuhaikang.customcard

应用截图：

针对此应用的文字卡片功能，做一个简单的技术总结。

核心技术架构

卡片类型系统

应用支持 8 种不同的卡片类型，每种卡片都有独特的视觉风格和编辑功能：

SimpleCard（简单卡片）：简洁的文字卡片，支持日期、作者、字数统计

BookmarkCard（书签卡片）：中英文双语书摘卡片

CoolCard（酷炫卡片）：具有现代设计感的卡片

GlowCard（发光卡片）：带有光效效果的卡片

TransparentCard（透明卡片）：透明背景的卡片

HandWriteCard（手写卡片）：手写风格的卡片

StructureCard（结构卡片）：结构化布局的卡片

MemoCard（备忘录卡片）：备忘录风格的卡片

组件截图导出技术

应用的核心功能之一是将编辑好的卡片导出为图片。这里使用了 HarmonyOS 的 componentSnapshot API：

TypeScript 复制代码

this.getUIContext()

.getComponentSnapshot()

.get("CardView", async (error: Error, pixmap: image.PixelMap) => {

if (error) {

reject(error);

return;

}

const imagePath = await CustomImageUtil.savePixelMapToSandbox(pixmap, 'final');

let context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;

let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);

saveImage(phAccessHelper, fileUri.getUriFromPath(imagePath));

}, { scale: 2, waitUntilRenderFinished: true });

关键技术点：

使用 getComponentSnapshot() 获取组件的像素图

通过 scale: 2 参数实现高分辨率导出

waitUntilRenderFinished: true 确保渲染完成后再截图

将 PixelMap 保存到沙箱，再通过 MediaLibrary 保存到相册

数据持久化方案

应用采用多层数据持久化策略：

3.1 卡片历史记录存储

使用 @pura/harmony-utils 的 KvUtil 进行键值对存储：

TypeScript 复制代码

export class CustomCardDatabase {

private readonly KEY_PREFIX = 'customcard_record_';

public async saveCardRecord(record: CustomCardHistoryRecord): Promise<void> {

const key = this.KEY_PREFIX + record.id;

KvUtil.put(key, JSON.stringify(record));

}

public async getAllCardRecords(): Promise<CustomCardHistoryRecord[]> {

const entries = await KvUtil.getEntries(this.KEY_PREFIX);

// 解析并返回所有记录

}

}

数据结构：

id: 唯一标识

cardType: 卡片类型

cardTitle: 卡片标题

finalImagePath: 最终图片路径

cardData: JSON 格式的完整卡片数据（用于恢复编辑）

3.2 模板配置管理

使用 preferences API 管理卡片模板配置：

TypeScript 复制代码

export class CardTemplateManager {

private readonly PREFERENCE_NAME = 'card_templates';

// 保存和加载模板配置

}

图片处理能力

应用集成了图片裁剪功能，使用 @candies/image_cropper 库：

支持矩形裁剪

支持圆形裁剪

图片预览和编辑

自定义裁剪比例

状态管理

采用 ArkTS 的响应式状态管理：

@State 装饰器管理组件内部状态

@Prop 装饰器实现父子组件数据传递

通过状态驱动 UI 更新，实现流畅的编辑体验

UI 组件化设计

应用采用高度组件化的设计：

TitleBar: 统一的标题栏组件

CardTemplate: 可复用的卡片模板组件

各种 Dialog: 模块化的编辑对话框（背景选择、字体选择、文本编辑等）

技术亮点

高性能渲染

使用 @State 实现细粒度的状态更新

组件懒加载，按需渲染

图片缓存机制，避免重复加载

用户体验优化

流畅的动画过渡效果

实时预览功能

历史记录快速恢复

多种预设模板

代码组织

单一职责原则：每个卡片类型独立文件

工具类封装：CustomImageUtil、DateUtil、FontManager 等

统一的数据库访问层

开发心得

组件化的重要性：通过组件化设计，大大提高了代码复用性和可维护性
状态管理策略：合理使用 @State 和 @Prop，避免不必要的重渲染
数据持久化：选择合适的存储方案（Preferences vs KV Store），平衡性能和易用性
截图导出优化：通过 scale 参数和 waitUntilRenderFinished 确保导出图片质量
用户体验：实时预览、历史记录、模板系统等功能的加入，显著提升了用户体验

技术栈总结

开发语言: ArkTS

UI 框架: ArkUI

状态管理: @State, @Prop

数据持久化: Preferences, KV Store

图片处理: ImageKit, image_cropper

第三方库:

@pura/harmony-utils

@pura/picker_utils

@candies/image_cropper

未来优化方向

支持更多卡片模板和样式
添加云同步功能
支持批量导出
优化大图片处理性能
添加卡片分享功能

【鸿蒙HarmonyOS Next App实战开发】卡片工坊 应用技术实践

【鸿蒙HarmonyOS Next App实战开发】卡片工坊应用技术实践