• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 根据卡片状态刷新不同内容
2
3
4相同的卡片可以添加到桌面上实现不同的功能,比如添加两张桌面的卡片,一张显示杭州的天气,一张显示北京的天气,设置每天早上7点触发定时刷新,卡片需要感知当前的配置是杭州还是北京,然后将对应城市的天气信息刷新到卡片上,以下示例介绍了如何根据卡片的状态动态选择需要刷新的内容。
5
6
7- 卡片配置文件:配置每天早上7点触发定时刷新
8
9  ```json
10  {
11    "forms": [
12      {
13        "name": "widget",
14        "description": "This is a service widget.",
15        "src": "./ets/widget/pages/WidgetCard.ets",
16        "uiSyntax": "arkts",
17        "window": {
18          "designWidth": 720,
19          "autoDesignWidth": true
20        },
21        "colorMode": "auto",
22        "isDefault": true,
23        "updateEnabled": true,"scheduledUpdateTime": "07:00",
24        "updateDuration": 0,
25        "defaultDimension": "2*2",
26        "supportDimensions": ["2*2"]
27      }
28    ]
29  }
30  ```
31
32- 卡片页面:卡片具备不同的状态选择,在不同的状态下需要刷新不同的内容,因此在状态发生变化时通过postCardAction通知EntryFormAbility。
33
34  ```ts
35  let storage = new LocalStorage();
36  @Entry(storage)
37  @Component
38  struct WidgetCard {
39    @LocalStorageProp('textA') textA: string = '待刷新...';
40    @LocalStorageProp('textB') textB: string = '待刷新...';
41    @State selectA: boolean = false;
42    @State selectB: boolean = false;
43
44    build() {
45      Column() {
46        Row() {
47          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
48            .select(false)
49            .onChange((value: boolean) => {
50              this.selectA = value;
51              postCardAction(this, {
52                'action': 'message',
53                'params': {
54                  'selectA': JSON.stringify(value)
55                }
56              });
57            })
58          Text('状态A')
59        }
60
61        Row() {
62          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
63            .select(false)
64            .onChange((value: boolean) => {
65              this.selectB = value;
66              postCardAction(this, {
67                'action': 'message',
68                'params': {
69                  'selectB': JSON.stringify(value)
70                }
71              });
72            })
73          Text('状态B')
74        }
75
76        Row() { // 选中状态A才会进行刷新的内容
77          Text('状态A: ')
78          Text(this.textA)
79        }
80
81        Row() { // 选中状态B才会进行刷新的内容
82          Text('状态B: ')
83          Text(this.textB)
84        }
85      }.padding('10%')
86    }
87  }
88  ```
89
90- EntryFormAbility:将卡片的状态存储在本地数据库中,在刷新事件回调触发时,通过formId获取当前卡片的状态,然后根据卡片的状态选择不同的刷新内容。
91
92  ```ts
93  import formInfo from '@ohos.app.form.formInfo'
94  import formProvider from '@ohos.app.form.formProvider';
95  import formBindingData from '@ohos.app.form.formBindingData';
96  import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
97  import dataStorage from '@ohos.data.storage'
98
99  export default class EntryFormAbility extends FormExtensionAbility {
100    onAddForm(want) {
101      let formId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
102      let isTempCard: boolean = want.parameters[formInfo.FormParam.TEMPORARY_KEY];
103      if (isTempCard === false) { // 如果为常态卡片,直接进行信息持久化
104        console.info('Not temp card, init db for:' + formId);
105        let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
106        storeDB.putSync('A' + formId, 'false');
107        storeDB.putSync('B' + formId, 'false');
108        storeDB.flushSync();
109      }
110      let formData = {};
111      return formBindingData.createFormBindingData(formData);
112    }
113
114    onRemoveForm(formId) {
115      console.info('onRemoveForm, formId:' + formId);
116      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
117      storeDB.deleteSync('A' + formId);
118      storeDB.deleteSync('B' + formId);
119    }
120
121    // 如果在添加时为临时卡片,则建议转为常态卡片时进行信息持久化
122    onCastToNormalForm(formId) {
123      console.info('onCastToNormalForm, formId:' + formId);
124      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
125      storeDB.putSync('A' + formId, 'false');
126      storeDB.putSync('B' + formId, 'false');
127      storeDB.flushSync();
128    }
129
130    onUpdateForm(formId) {
131      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
132      let stateA = storeDB.getSync('A' + formId, 'false').toString()
133      let stateB = storeDB.getSync('B' + formId, 'false').toString()
134      // A状态选中则更新textA
135      if (stateA === 'true') {
136        let formInfo = formBindingData.createFormBindingData({
137          'textA': 'AAA'
138        })
139        formProvider.updateForm(formId, formInfo)
140      }
141      // B状态选中则更新textB
142      if (stateB === 'true') {
143        let formInfo = formBindingData.createFormBindingData({
144          'textB': 'BBB'
145        })
146        formProvider.updateForm(formId, formInfo)
147      }
148    }
149
150    onFormEvent(formId, message) {
151      // 存放卡片状态
152      console.info('onFormEvent formId:' + formId + 'msg:' + message);
153      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
154      let msg = JSON.parse(message)
155      if (msg.selectA != undefined) {
156        console.info('onFormEvent selectA info:' + msg.selectA);
157        storeDB.putSync('A' + formId, msg.selectA);
158      }
159      if (msg.selectB != undefined) {
160        console.info('onFormEvent selectB info:' + msg.selectB);
161        storeDB.putSync('B' + formId, msg.selectB);
162      }
163      storeDB.flushSync();
164    }
165  };
166  ```
167
168
169> **说明:**
170>
171> 通过本地数据库进行卡片信息的持久化时,建议先在[**onAddForm**](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform)生命周期中通过[**TEMPORARY_KEY**](../reference/apis/js-apis-app-form-formInfo.md#formparam)判断当前添加的卡片是否为常态卡片:如果是常态卡片,则直接进行卡片信息持久化;如果为临时卡片,则可以在卡片转为常态卡片(**[onCastToNormalForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#oncasttonormalform)**)时进行持久化;同时需要在卡片销毁(**[onRemoveForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onremoveform)**)时删除当前卡片存储的持久化信息,避免反复添加删除卡片导致数据库文件持续变大。
172
173