在主应用中将resource目录中图片保存至沙箱，并根据沙箱中图片路径读取，获取文件的fd。构造传递给卡片的数据，需注意传递对象的key要与卡片页面一致。//Index.ets
import { common } from '@kit.AbilityKit';
import { fileIo, fileUri } from '@kit.CoreFileKit';
import { AddFormMenuItem } from '@kit.ArkUI';
import { formBindingData } from '@kit.FormKit';
import { JSON } from '@kit.ArkTS';
@ObservedV2
export class CardModel {
// 需注意，采用状态变量监控后，实际属性key会发生变化
@Trace cardID: string = '';
@Trace cardTitle: string = '';
imageBackgroundPath_Square: string = '';
// 卡片需要显示图片场景, 必须和下列字段formImages 中的key fileName 相同。
imgName: string = 'fileName';
// 卡片需要显示图片场景, 必填字段(formImages 不可缺省或改名), fileName 对应 fd
formImages: Record<string, number> = {};
}
@Entry
@ComponentV2
struct Index {
private context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
@Local newCard: CardModel = new CardModel();
@Local imageLoaded: boolean = false;
async saveResourceToSandbox() {
try {
const sandboxPath = this.context.filesDir + '/test.png';
const resourceManager = this.context.resourceManager;
// 加载media目录下的test图片
const fileContent = resourceManager.getMediaContentSync($r('app.media.test').id);
let file = fileIo.openSync(sandboxPath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
fileIo.writeSync(file.fd, fileContent.buffer);
fileIo.closeSync(file);
console.info('文件已存入沙箱路径：', sandboxPath);
this.newCard.imageBackgroundPath_Square = sandboxPath;
this.imageLoaded = true;
console.info('图片已保存到沙箱路径：', this.newCard.imageBackgroundPath_Square);
} catch (err) {
console.error('保存失败，错误码：', (err as Error).message);
}
}
async getImageFd(imagePath: string): Promise<number> {
try {
let file = fileIo.openSync(imagePath, fileIo.OpenMode.READ_ONLY);
return file.fd;
} catch (err) {
console.error(`打开文件失败: ${err.message}`);
return -1;
}
}
async aboutToAppear() {
// 保存图片
await this.saveResourceToSandbox();
this.newCard.cardID = '1';
this.newCard.cardTitle = '测试';
// 图片
let fileName = 'file' + Date.now();
let imgMap: Record<string, number> = {};
this.newCard.imgName = fileName;
this.newCard.formImages = imgMap;
// 获取图片fd
imgMap[fileName] = await this.getImageFd(this.newCard.imageBackgroundPath_Square);
console.info('构造卡片初始化数据', JSON.stringify(this.newCard));
}
@Builder
MyMenu() {
Menu() {
AddFormMenuItem(
{
// 应用包名 需要更换自己的
bundleName: 'com.zwl.myapplication',
abilityName: 'EntryFormAbility',
parameters: {
'ohos.extra.param.key.form_dimension': 2,
'ohos.extra.param.key.form_name': 'widget',
'ohos.extra.param.key.module_name': 'entry',
},
},
this.newCard.cardID,
{
formBindingData: formBindingData.createFormBindingData(this.newCard),
callback: (error, formId) => {
console.info('AddCardMenu', `callback info：error = ${JSON.stringify(error)}, formId = ${formId}`);
// 更新桌面卡片后 关闭文件
fileIo.closeSync(this.newCard.formImages[this.newCard.imgName]);
if (error?.code === 0) {
console.info('AddCardMenu', "添加至桌面成功");
} else {
console.info('AddCardMenu', "添加至桌面失败，请尝试其它添加方式");
}
},
}
);
};
}
build() {
Row() {
Column() {
if (this.imageLoaded) {
Image(fileUri.getUriFromPath(this.newCard.imageBackgroundPath_Square)) // 自定义图片
.id(this.newCard.cardID)
.width(200)
.height(200)
.bindContextMenu(this.MyMenu, ResponseType.LongPress, {
placement: Placement.TopLeft
});
}
}
.width('100%');
}
.height('100%');
}
}