• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 根据卡片状态刷新不同内容
2
3
4相同的卡片可以添加到桌面上实现不同的功能，比如添加两张桌面的卡片，一张显示杭州的天气，一张显示北京的天气，设置每天早上7点触发定时刷新，卡片需要感知当前的配置是杭州还是北京，然后将对应城市的天气信息刷新到卡片上，以下示例介绍了如何根据卡片的状态动态选择需要刷新的内容。
5
6
7- 卡片配置文件：配置每30分钟自动刷新。
8
9  ```json
10  {
11    "forms": [
12      {
13        "name": "WidgetUpdateByStatus",
14        "description": "$string:UpdateByStatusFormAbility_desc",
15        "src": "./ets/widgetupdatebystatus/pages/WidgetUpdateByStatusCard.ets",
16        "uiSyntax": "arkts",
17        "window": {
18          "designWidth": 720,
19          "autoDesignWidth": true
20        },
21        "colorMode": "auto",
22        "isDefault": true,
23        "updateEnabled": true,
24        "scheduledUpdateTime": "10:30",
25        "updateDuration": 1,
26        "defaultDimension": "2*2",
27        "supportDimensions": [
28          "2*2"
29        ]
30      }
31    ]
32  }
33  ```
34
35- 卡片页面：卡片具备不同的状态选择，在不同的状态下需要刷新不同的内容，因此在状态发生变化时通过postCardAction通知EntryFormAbility。
36
37  ```ts
38  let storageUpdateByStatus = new LocalStorage();
39
40  @Entry(storageUpdateByStatus)
41  @Component
42  struct WidgetUpdateByStatusCard {
43    @LocalStorageProp('textA') textA: Resource = $r('app.string.to_be_refreshed');
44    @LocalStorageProp('textB') textB: Resource = $r('app.string.to_be_refreshed');
45    @State selectA: boolean = false;
46    @State selectB: boolean = false;
47
48    build() {
49      Column() {
50        Column() {
51          Row() {
52            Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
53              .padding(0)
54              .select(false)
55              .margin({ left: 26 })
56              .onChange((value: boolean) => {
57                this.selectA = value;
58                postCardAction(this, {
59                  action: 'message',
60                  params: {
61                    selectA: JSON.stringify(value)
62                  }
63                });
64              })
65            Text($r('app.string.status_a'))
66              .fontColor('#000000')
67              .opacity(0.9)
68              .fontSize(14)
69              .margin({ left: 8 })
70          }
71          .width('100%')
72          .padding(0)
73          .justifyContent(FlexAlign.Start)
74
75          Row() {
76            Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
77              .padding(0)
78              .select(false)
79              .margin({ left: 26 })
80              .onChange((value: boolean) => {
81                this.selectB = value;
82                postCardAction(this, {
83                  action: 'message',
84                  params: {
85                    selectB: JSON.stringify(value)
86                  }
87                });
88              })
89            Text($r('app.string.status_b'))
90              .fontColor('#000000')
91              .opacity(0.9)
92              .fontSize(14)
93              .margin({ left: 8 })
94          }
95          .width('100%')
96          .position({ y: 32 })
97          .padding(0)
98          .justifyContent(FlexAlign.Start)
99        }
100        .position({ y: 12 })
101
102        Column() {
103          Row() { // 选中状态A才会进行刷新的内容
104            Text($r('app.string.status_a'))
105              .fontColor('#000000')
106              .opacity(0.4)
107              .fontSize(12)
108
109            Text(this.textA)
110              .fontColor('#000000')
111              .opacity(0.4)
112              .fontSize(12)
113          }
114          .margin({ top: '12px', left: 26, right: '26px' })
115
116          Row() { // 选中状态B才会进行刷新的内容
117            Text($r('app.string.status_b'))
118              .fontColor('#000000')
119              .opacity(0.4)
120              .fontSize(12)
121            Text(this.textB)
122              .fontColor('#000000')
123              .opacity(0.4)
124              .fontSize(12)
125          }.margin({ top: '12px', bottom: '21px', left: 26, right: '26px' })
126        }
127        .margin({ top: 80 })
128        .width('100%')
129        .alignItems(HorizontalAlign.Start)
130      }.width('100%').height('100%')
131      .backgroundImage($r('app.media.CardUpdateByStatus'))
132      .backgroundImageSize(ImageSize.Cover)
133    }
134  }
135  ```
136
137- EntryFormAbility：将卡片的状态存储在本地数据库中，在刷新事件回调触发时，通过formId获取当前卡片的状态，然后根据卡片的状态选择不同的刷新内容。
138
139  ```ts
140  import { Want } from '@kit.AbilityKit';
141  import { preferences } from '@kit.ArkData';
142  import { BusinessError } from '@kit.BasicServicesKit';
143  import { formBindingData, FormExtensionAbility, formInfo, formProvider } from '@kit.FormKit';
144  import { hilog } from '@kit.PerformanceAnalysisKit';
145
146  const TAG: string = 'UpdateByStatusFormAbility';
147  const DOMAIN_NUMBER: number = 0xFF00;
148
149  export default class UpdateByStatusFormAbility extends FormExtensionAbility {
150    onAddForm(want: Want): formBindingData.FormBindingData {
151      let formId: string = '';
152      if (want.parameters) {
153        formId = want.parameters[formInfo.FormParam.IDENTITY_KEY].toString();
154        let promise: Promise<preferences.Preferences> = preferences.getPreferences(this.context, 'myStore');
155        promise.then(async (storeDB: preferences.Preferences) => {
156          hilog.info(DOMAIN_NUMBER, TAG, 'Succeeded to get preferences.');
157          await storeDB.put('A' + formId, 'false');
158          await storeDB.put('B' + formId, 'false');
159          await storeDB.flush();
160        }).catch((err: BusinessError) => {
161          hilog.info(DOMAIN_NUMBER, TAG, `Failed to get preferences. ${JSON.stringify(err)}`);
162        });
163      }
164      let formData: Record<string, Object | string> = {};
165      return formBindingData.createFormBindingData(formData);
166    }
167
168    onRemoveForm(formId: string): void {
169      hilog.info(DOMAIN_NUMBER, TAG, 'onRemoveForm, formId:' + formId);
170      let promise = preferences.getPreferences(this.context, 'myStore');
171      promise.then(async (storeDB) => {
172        hilog.info(DOMAIN_NUMBER, TAG, 'Succeeded to get preferences.');
173        await storeDB.delete('A' + formId);
174        await storeDB.delete('B' + formId);
175      }).catch((err: BusinessError) => {
176      hilog.info(DOMAIN_NUMBER, TAG, `Failed to get preferences. ${JSON.stringify(err)}`);
177      });
178    }
179
180    // 当前卡片使用方不会涉及该场景，无需实现该回调函数
181    onCastToNormalForm(formId: string): void { }
182
183    onUpdateForm(formId: string): void {
184      let promise: Promise<preferences.Preferences> = preferences.getPreferences(this.context, 'myStore');
185      promise.then(async (storeDB: preferences.Preferences) => {
186        hilog.info(DOMAIN_NUMBER, TAG, 'Succeeded to get preferences from onUpdateForm.');
187        let stateA = await storeDB.get('A' + formId, 'false');
188        let stateB = await storeDB.get('B' + formId, 'false');
189        // A状态选中则更新textA
190        if (stateA === 'true') {
191          let param: Record<string, string> = {
192            'textA': 'AAA'
193          };
194          let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);
195          await formProvider.updateForm(formId, formInfo);
196        }
197        // B状态选中则更新textB
198        if (stateB === 'true') {
199          let param: Record<string, string> = {
200            'textB': 'BBB'
201          };
202          let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);
203        await formProvider.updateForm(formId, formInfo);
204        }
205        hilog.info(DOMAIN_NUMBER, TAG, `Update form success stateA:${stateA} stateB:${stateB}.`);
206      }).catch((err: BusinessError) => {
207        hilog.info(DOMAIN_NUMBER, TAG, `Failed to get preferences. ${JSON.stringify(err)}`);
208      });
209    }
210
211    onFormEvent(formId: string, message: string): void {
212      // 存放卡片状态
213      hilog.info(DOMAIN_NUMBER, TAG, 'onFormEvent formId:' + formId + 'msg:' + message);
214      let promise: Promise<preferences.Preferences> = preferences.getPreferences(this.context, 'myStore');
215      promise.then(async (storeDB: preferences.Preferences) => {
216        hilog.info(DOMAIN_NUMBER, TAG, 'Succeeded to get preferences.');
217        let msg: Record<string, string> = JSON.parse(message);
218        if (msg.selectA !== undefined) {
219          hilog.info(DOMAIN_NUMBER, TAG, 'onFormEvent selectA info:' + msg.selectA);
220          await storeDB.put('A' + formId, msg.selectA);
221        }
222        if (msg.selectB !== undefined) {
223          hilog.info(DOMAIN_NUMBER, TAG, 'onFormEvent selectB info:' + msg.selectB);
224          await storeDB.put('B' + formId, msg.selectB);
225        }
226        await storeDB.flush();
227      }).catch((err: BusinessError) => {
228        hilog.info(DOMAIN_NUMBER, TAG, `Failed to get preferences. ${JSON.stringify(err)}`);
229      });
230    }
231  }
232  ```
233
234
235> **说明：**
236>
237> 通过本地数据库进行卡片信息的持久化时，建议先在[**onAddForm**](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md#formextensionabilityonaddform)生命周期进行卡片信息持久化；同时需要在卡片销毁(**[onRemoveForm](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md#formextensionabilityonremoveform)**)时删除当前卡片存储的持久化信息，避免反复添加删除卡片导致数据库文件持续变大。