开发场景需求
在"拍摄美颜相机"应用中，用户需要快速启动拍摄和预览最新照片。Form Kit 作为鸿蒙的桌面卡片框架，实现了：
桌面一键启动美颜模式
动态展示最近拍摄的照片
无需打开APP即可切换常用滤镜
`// **核心实现与代码示例
// **卡片基础配置
module.json5 声明：
json
"abilities": [{
"name": "BeautyCameraForm",
"type": "form",
"srcEntry": "./ets/forms/BeautyCameraForm.ets",
"formConfig": {
"name": "beauty_cam_card",
"description": "美颜相机快捷卡片",
"isDefault": true,
"updateEnabled": true, // 允许动态更新
"scheduledUpdateTime": "10:00", // 每日更新
"formDimensions": ["2*2"] // 支持2x2网格
}
}]
// **卡片UI布局实现
typescript
// 卡片组件（BeautyCameraForm.ets）
@Component
export default struct BeautyCameraForm {
@State latestPhoto: Resource = $r('app.media.default_thumb');
@State selectedFilter: string = '自然';
build() {
Column() {
// 照片预览区
Image(this.latestPhoto)
.width('100%')
.height(120)
.borderRadius(8)
.onClick(() => this.openCamera())
// 滤镜快捷切换
Row() {
Button('自然').fontSize(10)
.selected(this.selectedFilter === '自然')
.onClick(() => this.changeFilter('自然'))
Button('复古').fontSize(10)
.selected(this.selectedFilter === '复古')
.onClick(() => this.changeFilter('复古'))
}.margin({ top: 8 })
// 一键启动按钮
Button('美颜拍摄')
.width('80%')
.margin({ top: 12 })
.onClick(() => this.openCamera())
}
.padding(12)
.onAppear(() => this.loadLatestPhoto())
}
// 加载最新照片
private async loadLatestPhoto() {
const photo = await MediaLibrary.getLatestAsset();
this.latestPhoto = photo.thumbnail;
}
}
// 动态卡片更新逻辑
typescript
// 卡片生命周期管理
export default class BeautyCameraFormAbility extends FormExtension {
onAddForm(want: Want) {
// 初始创建卡片
return formBinding.createFormBinding(this, want);
}
onCastToNormalForm(formId: string) {
// 卡片转常态时刷新数据
formProvider.updateForm(formId, {
latestPhoto: await MediaLibrary.getLatestThumb()
});
}
// 接收APP事件更新
onEvent(formId: string, message: string) {
if (message.startsWith('PHOTO_ADDED')) {
formProvider.updateForm(formId, {
latestPhoto: message.split('|')[1]
});
}
}
}
// APP与卡片通信
typescript
// 在相机拍照后通知卡片更新
function notifyCardUpdate(photoUri: string) {
const formIds = formProvider.getForms('beauty_cam_card');
formIds.forEach(id => {
formProvider.requestUpdateForm(id, {
message: PHOTO_ADDED|${photoUri}
});
});
}
关键特性应用
1. 多尺寸适配
typescript
// 2x4卡片布局
@Builder
function buildLargeCard() {
Grid() {
GridItem() { / 照片预览 / }
GridItem() { / 滤镜矩阵 / }
}
.columnsTemplate('1fr 1fr')
}
// **深色模式适配
typescript
// 根据系统主题切换样式
@Styles
function cardStyle() {
.backgroundColor($r('app.color.background'))
.lightOrDark({
light: { backgroundColor: Color.White },
dark: { backgroundColor: '#1A1A1A' }
})
}
// **卡片刷新频率控制
typescript
// 避免频繁更新
const UPDATE_INTERVAL = 30_000; // 30秒间隔
let lastUpdate = 0;
onPhotoAdded() {
if (Date.now() - lastUpdate > UPDATE_INTERVAL) {
notifyCardUpdate();
lastUpdate = Date.now();
}
}
// **跨设备尺寸适配
typescript
// 根据设备类型选择布局
aboutToAppear() {
const deviceType = deviceInfo.deviceType;
this.isTablet = (deviceType === DeviceType.TABLET);
}
build() {
if (this.isTablet) {
this.buildTabletLayout();
} else {
this.buildPhoneLayout();
}
}
// **权限声明
json
// 卡片访问相册权限
"requestPermissions": [
{
"name": "ohos.permission.READ_IMAGEVIDEO",
"reason": "显示最新照片缩略图"
}
]`
