arkts-ui-widget-update-by-status.md 6.5 KB
Newer Older
Z
zhongjianfei 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
# 根据卡片状态刷新不同内容


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


- 卡片配置文件:配置每天早上7点触发定时刷新
  
  ```json
  {
    "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。
  
  ```ts
  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获取当前卡片的状态,然后根据卡片的状态选择不同的刷新内容。
  
  ```ts
93
  import formInfo from '@ohos.app.form.formInfo'
Z
zhongjianfei 已提交
94 95 96
  import formProvider from '@ohos.app.form.formProvider';
  import formBindingData from '@ohos.app.form.formBindingData';
  import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
Y
yuyaozhi 已提交
97
  import dataPreferences from '@ohos.data.preferences';
Z
zhongjianfei 已提交
98 99 100
  
  export default class EntryFormAbility extends FormExtensionAbility {
    onAddForm(want) {
101 102 103 104
      let formId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
      let isTempCard: boolean = want.parameters[formInfo.FormParam.TEMPORARY_KEY];
      if (isTempCard === false) { // 如果为常态卡片,直接进行信息持久化
        console.info('Not temp card, init db for:' + formId);
Y
yuyaozhi 已提交
105 106 107 108
        let storeDB = dataPreferences.getPreferences(this.context, 'mystore')
        storeDB.put('A' + formId, 'false');
        storeDB.put('B' + formId, 'false');
        storeDB.flush();
109
      }
Z
zhongjianfei 已提交
110 111 112 113 114 115
      let formData = {};
      return formBindingData.createFormBindingData(formData);
    }
  
    onRemoveForm(formId) {
      console.info('onRemoveForm, formId:' + formId);
Y
yuyaozhi 已提交
116 117 118
      let storeDB = dataPreferences.getPreferences(this.context, 'mystore')
      storeDB.delete('A' + formId);
      storeDB.delete('B' + formId);
Z
zhongjianfei 已提交
119 120
    }
  
121
    // 如果在添加时为临时卡片,则建议转为常态卡片时进行信息持久化
Z
zhongjianfei 已提交
122 123
    onCastToNormalForm(formId) {
      console.info('onCastToNormalForm, formId:' + formId);
Y
yuyaozhi 已提交
124 125 126 127
      let storeDB = dataPreferences.getPreferences(this.context, 'myStore')
      storeDB.put('A' + formId, 'false');
      storeDB.put('B' + formId, 'false');
      storeDB.flush();
Z
zhongjianfei 已提交
128 129 130
    }
  
    onUpdateForm(formId) {
Y
yuyaozhi 已提交
131 132 133
      let storeDB = dataPreferences.getPreferences(this.context, 'myStore')
      let stateA = storeDB.get('A' + formId, 'false').toString()
      let stateB = storeDB.get('B' + formId, 'false').toString()
Z
zhongjianfei 已提交
134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
      // A状态选中则更新textA
      if (stateA === 'true') {
        let formInfo = formBindingData.createFormBindingData({
          'textA': 'AAA'
        })
        formProvider.updateForm(formId, formInfo)
      }
      // B状态选中则更新textB
      if (stateB === 'true') {
        let formInfo = formBindingData.createFormBindingData({
          'textB': 'BBB'
        })
        formProvider.updateForm(formId, formInfo)
      }
    }
  
    onFormEvent(formId, message) {
      // 存放卡片状态
      console.info('onFormEvent formId:' + formId + 'msg:' + message);
Y
yuyaozhi 已提交
153
      let storeDB = dataPreferences.getPreferences(this.context, 'myStore')
Z
zhongjianfei 已提交
154 155 156
      let msg = JSON.parse(message)
      if (msg.selectA != undefined) {
        console.info('onFormEvent selectA info:' + msg.selectA);
Y
yuyaozhi 已提交
157
        storeDB.put('A' + formId, msg.selectA);
Z
zhongjianfei 已提交
158 159 160
      }
      if (msg.selectB != undefined) {
        console.info('onFormEvent selectB info:' + msg.selectB);
Y
yuyaozhi 已提交
161
        storeDB.put('B' + formId, msg.selectB);
Z
zhongjianfei 已提交
162
      }
Y
yuyaozhi 已提交
163
      storeDB.flush();
Z
zhongjianfei 已提交
164 165 166 167 168
    }
  };
  ```


169 170
> **说明:**
>
171 172
> 通过本地数据库进行卡片信息的持久化时,建议先在[**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)**)时删除当前卡片存储的持久化信息,避免反复添加删除卡片导致数据库文件持续变大。