根据卡片状态刷新不同内容

2024-01-25 12:23 更新

相同的卡片可以添加到桌面上实现不同的功能,比如添加两张桌面的卡片,一张显示杭州的天气,一张显示北京的天气,设置每天早上7点触发定时刷新,卡片需要感知当前的配置是杭州还是北京,然后将对应城市的天气信息刷新到卡片上,以下示例介绍了如何根据卡片的状态动态选择需要刷新的内容。

  • 卡片配置文件:配置每天早上7点触发定时刷新
    1. {
    2. "forms": [
    3. {
    4. "name": "widget",
    5. "description": "This is a service widget.",
    6. "src": "./ets/widget/pages/WidgetCard.ets",
    7. "uiSyntax": "arkts",
    8. "window": {
    9. "designWidth": 720,
    10. "autoDesignWidth": true
    11. },
    12. "colorMode": "auto",
    13. "isDefault": true,
    14. "updateEnabled": true,
    15. "scheduledUpdateTime": "07:00",
    16. "updateDuration": 0,
    17. "defaultDimension": "2*2",
    18. "supportDimensions": ["2*2"]
    19. }
    20. ]
    21. }
  • 卡片页面:卡片具备不同的状态选择,在不同的状态下需要刷新不同的内容,因此在状态发生变化时通过postCardAction通知EntryFormAbility。
    1. let storage = new LocalStorage();
    2. @Entry(storage)
    3. @Component
    4. struct WidgetCard {
    5. @LocalStorageProp('textA') textA: string = '待刷新...';
    6. @LocalStorageProp('textB') textB: string = '待刷新...';
    7. @State selectA: boolean = false;
    8. @State selectB: boolean = false;
    9. build() {
    10. Column() {
    11. Row() {
    12. Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
    13. .select(false)
    14. .onChange((value: boolean) => {
    15. this.selectA = value;
    16. postCardAction(this, {
    17. 'action': 'message',
    18. 'params': {
    19. 'selectA': JSON.stringify(value)
    20. }
    21. });
    22. })
    23. Text('状态A')
    24. }
    25. Row() {
    26. Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
    27. .select(false)
    28. .onChange((value: boolean) => {
    29. this.selectB = value;
    30. postCardAction(this, {
    31. 'action': 'message',
    32. 'params': {
    33. 'selectB': JSON.stringify(value)
    34. }
    35. });
    36. })
    37. Text('状态B')
    38. }
    39. Row() { // 选中状态A才会进行刷新的内容
    40. Text('状态A: ')
    41. Text(this.textA)
    42. }
    43. Row() { // 选中状态B才会进行刷新的内容
    44. Text('状态B: ')
    45. Text(this.textB)
    46. }
    47. }.padding('10%')
    48. }
    49. }
  • EntryFormAbility:将卡片的状态存储在本地数据库中,在刷新事件回调触发时,通过formId获取当前卡片的状态,然后根据卡片的状态选择不同的刷新内容。
    1. import formInfo from '@ohos.app.form.formInfo'
    2. import formProvider from '@ohos.app.form.formProvider';
    3. import formBindingData from '@ohos.app.form.formBindingData';
    4. import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
    5. import dataStorage from '@ohos.data.storage'
    6. export default class EntryFormAbility extends FormExtensionAbility {
    7. onAddForm(want) {
    8. let formId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
    9. let isTempCard: boolean = want.parameters[formInfo.FormParam.TEMPORARY_KEY];
    10. if (isTempCard === false) { // 如果为常态卡片,直接进行信息持久化
    11. console.info('Not temp card, init db for:' + formId);
    12. let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
    13. storeDB.putSync('A' + formId, 'false');
    14. storeDB.putSync('B' + formId, 'false');
    15. storeDB.flushSync();
    16. }
    17. let formData = {};
    18. return formBindingData.createFormBindingData(formData);
    19. }
    20. onRemoveForm(formId) {
    21. console.info('onRemoveForm, formId:' + formId);
    22. let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
    23. storeDB.deleteSync('A' + formId);
    24. storeDB.deleteSync('B' + formId);
    25. }
    26. // 如果在添加时为临时卡片,则建议转为常态卡片时进行信息持久化
    27. onCastToNormalForm(formId) {
    28. console.info('onCastToNormalForm, formId:' + formId);
    29. let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
    30. storeDB.putSync('A' + formId, 'false');
    31. storeDB.putSync('B' + formId, 'false');
    32. storeDB.flushSync();
    33. }
    34. onUpdateForm(formId) {
    35. let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
    36. let stateA = storeDB.getSync('A' + formId, 'false').toString()
    37. let stateB = storeDB.getSync('B' + formId, 'false').toString()
    38. // A状态选中则更新textA
    39. if (stateA === 'true') {
    40. let formInfo = formBindingData.createFormBindingData({
    41. 'textA': 'AAA'
    42. })
    43. formProvider.updateForm(formId, formInfo)
    44. }
    45. // B状态选中则更新textB
    46. if (stateB === 'true') {
    47. let formInfo = formBindingData.createFormBindingData({
    48. 'textB': 'BBB'
    49. })
    50. formProvider.updateForm(formId, formInfo)
    51. }
    52. }
    53. onFormEvent(formId, message) {
    54. // 存放卡片状态
    55. console.info('onFormEvent formId:' + formId + 'msg:' + message);
    56. let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
    57. let msg = JSON.parse(message)
    58. if (msg.selectA != undefined) {
    59. console.info('onFormEvent selectA info:' + msg.selectA);
    60. storeDB.putSync('A' + formId, msg.selectA);
    61. }
    62. if (msg.selectB != undefined) {
    63. console.info('onFormEvent selectB info:' + msg.selectB);
    64. storeDB.putSync('B' + formId, msg.selectB);
    65. }
    66. storeDB.flushSync();
    67. }
    68. };
说明

通过本地数据库进行卡片信息的持久化时,建议先在onAddForm生命周期中通过TEMPORARY_KEY判断当前添加的卡片是否为常态卡片:如果是常态卡片,则直接进行卡片信息持久化;如果为临时卡片,则可以在卡片转为常态卡片(onCastToNormalForm)时进行持久化;同时需要在卡片销毁(onRemoveForm)时删除当前卡片存储的持久化信息,避免反复添加删除卡片导致数据库文件持续变大。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号