harmony 鸿蒙根据卡片状态刷新不同内容
根据卡片状态刷新不同内容
相同的卡片可以添加到桌面上实现不同的功能,比如添加两张桌面的卡片,一张显示杭州的天气,一张显示北京的天气,设置每天早上7点触发定时刷新,卡片需要感知当前的配置是杭州还是北京,然后将对应城市的天气信息刷新到卡片上,以下示例介绍了如何根据卡片的状态动态选择需要刷新的内容。
- 卡片配置文件:配置每天早上7点触发定时刷新。
{
"forms": [
{
"name": "widget",
"description": "This is a service widget.",
"src": "./ets/widget/pages/WidgetCard.ets",
"uiSyntax": "arkts",
"window": {
"designWidth": 720,
"autoDesignWidth": true
},
"colorMode": "auto",
"isDefault": true,
"updateEnabled": true,
"scheduledUpdateTime": "07:00",
"updateDuration": 0,
"defaultDimension": "2*2",
"supportDimensions": ["2*2"]
}
]
}
- 卡片页面:卡片具备不同的状态选择,在不同的状态下需要刷新不同的内容,因此在状态发生变化时通过postCardAction通知EntryFormAbility。
let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
@LocalStorageProp('textA') textA: string = '待刷新...';
@LocalStorageProp('textB') textB: string = '待刷新...';
@State selectA: boolean = false;
@State selectB: boolean = false;
build() {
Column() {
Row() {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(false)
.onChange((value: boolean) => {
this.selectA = value;
postCardAction(this, {
'action': 'message',
'params': {
'selectA': JSON.stringify(value)
}
});
})
Text('状态A')
}
Row() {
Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
.select(false)
.onChange((value: boolean) => {
this.selectB = value;
postCardAction(this, {
'action': 'message',
'params': {
'selectB': JSON.stringify(value)
}
});
})
Text('状态B')
}
Row() { // 选中状态A才会进行刷新的内容
Text('状态A: ')
Text(this.textA)
}
Row() { // 选中状态B才会进行刷新的内容
Text('状态B: ')
Text(this.textB)
}
}.padding('10%')
}
}
- EntryFormAbility:将卡片的状态存储在本地数据库中,在刷新事件回调触发时,通过formId获取当前卡片的状态,然后根据卡片的状态选择不同的刷新内容。
import formInfo from '@ohos.app.form.formInfo'
import formProvider from '@ohos.app.form.formProvider';
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import dataPreferences from '@ohos.data.preferences';
import Want from '@ohos.app.ability.Want';
import Base from '@ohos.base';
export default class EntryFormAbility extends FormExtensionAbility {
onAddForm(want: Want) {
let formId: string = '';
let isTempCard: boolean;
if (want.parameters) {
formId = JSON.stringify(want.parameters[formInfo.FormParam.IDENTITY_KEY]);
isTempCard = want.parameters[formInfo.FormParam.TEMPORARY_KEY] as boolean;
if (isTempCard === false) { // 如果为常态卡片,直接进行信息持久化
console.info('Not temp card, init db for:' + formId);
let promise: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(this.context, 'myStore');
promise.then(async (storeDB: dataPreferences.Preferences) => {
console.info("Succeeded to get preferences.");
await storeDB.put('A' + formId, 'false');
await storeDB.put('B' + formId, 'false');
await storeDB.flush();
}).catch((err: Base.BusinessError) => {
console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
})
}
}
let formData: Record<string, Object|string> = {};
return formBindingData.createFormBindingData(formData);
}
onRemoveForm(formId: string) {
console.info('onRemoveForm, formId:' + formId);
let promise = dataPreferences.getPreferences(this.context, 'myStore');
promise.then(async (storeDB) => {
console.info("Succeeded to get preferences.");
await storeDB.delete('A' + formId);
await storeDB.delete('B' + formId);
}).catch((err: Base.BusinessError) => {
console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
})
}
// 如果在添加时为临时卡片,则建议转为常态卡片时进行信息持久化
onCastToNormalForm(formId: string) {
console.info('onCastToNormalForm, formId:' + formId);
let promise: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(this.context, 'myStore');
promise.then(async (storeDB: dataPreferences.Preferences) => {
console.info("Succeeded to get preferences.");
await storeDB.put('A' + formId, 'false');
await storeDB.put('B' + formId, 'false');
await storeDB.flush();
}).catch((err: Base.BusinessError) => {
console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
})
}
onUpdateForm(formId: string) {
let promise: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(this.context, 'myStore');
promise.then(async (storeDB: dataPreferences.Preferences) => {
console.info("Succeeded to get preferences.");
let stateA = await storeDB.get('A' + formId, 'false');
let stateB = await storeDB.get('B' + formId, 'false');
// A状态选中则更新textA
if (stateA === 'true') {
let param: Record<string, string> = { 'textA': 'AAA' };
let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);
await formProvider.updateForm(formId, formInfo);
}
// B状态选中则更新textB
if (stateB === 'true') {
let param: Record<string, string> = { 'textB': 'BBB' };
let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);
await formProvider.updateForm(formId, formInfo);
}
console.info(`Update form success stateA:${stateA} stateB:${stateB}.`);
}).catch((err: Base.BusinessError) => {
console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
})
}
onFormEvent(formId: string, message: string) {
// 存放卡片状态
console.info('onFormEvent formId:' + formId + 'msg:' + message);
let promise: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(this.context, 'myStore');
promise.then(async (storeDB: dataPreferences.Preferences) => {
console.info("Succeeded to get preferences.");
let msg: Record<string, string> = JSON.parse(message);
if (msg.selectA != undefined) {
console.info('onFormEvent selectA info:' + msg.selectA);
await storeDB.put('A' + formId, msg.selectA);
}
if (msg.selectB != undefined) {
console.info('onFormEvent selectB info:' + msg.selectB);
await storeDB.put('B' + formId, msg.selectB);
}
await storeDB.flush();
}).catch((err: Base.BusinessError) => {
console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
})
}
};
说明:
通过本地数据库进行卡片信息的持久化时,建议先在onAddForm生命周期中通过TEMPORARY_KEY判断当前添加的卡片是否为常态卡片:如果是常态卡片,则直接进行卡片信息持久化;如果为临时卡片,则可以在卡片转为常态卡片(onCastToNormalForm)时进行持久化;同时需要在卡片销毁(onRemoveForm)时删除当前卡片存储的持久化信息,避免反复添加删除卡片导致数据库文件持续变大。
你可能感兴趣的鸿蒙文章
harmony 鸿蒙FA模型访问Stage模型DataShareExtensionAbility
0
赞
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦