通過(guò)message事件刷新卡片內(nèi)容

在卡片頁(yè)面中可以通過(guò)postCardAction接口觸發(fā)message事件拉起FormExtensionAbility，然后由FormExtensionAbility刷新卡片內(nèi)容，下面是這種刷新方式的簡(jiǎn)單示例。

• 在卡片頁(yè)面通過(guò)注冊(cè)Button的onClick點(diǎn)擊事件回調(diào)，并在回調(diào)中調(diào)用postCardAction接口觸發(fā)message事件拉起FormExtensionAbility。

  let storage = new LocalStorage();
  
  @Entry(storage)
  @Component
  struct WidgetCard {
    @LocalStorageProp('title') title: string = 'init';
    @LocalStorageProp('detail') detail: string = 'init';
  
    build() {
      Column() {
        Button('刷新')
          .onClick(() => {
            postCardAction(this, {
              'action': 'message',
              'params': {
                'msgTest': 'messageEvent'
              }
            });
          })
        Text(`${this.title}`)
        Text(`${this.detail}`)
      }
      .width('100%')
      .height('100%')
    }
  }

• 在FormExtensionAbility的onFormEvent生命周期中調(diào)用updateForm接口刷新卡片。

  import formBindingData from '@ohos.app.form.formBindingData';
  import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
  import formProvider from '@ohos.app.form.formProvider';
  
  export default class EntryFormAbility extends FormExtensionAbility {
    onFormEvent(formId, message) {
      // Called when a specified message event defined by the form provider is triggered.
      console.info(`FormAbility onEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);
      let formData = {
        'title': 'Title Update Success.', // 和卡片布局中對(duì)應(yīng)
        'detail': 'Detail Update Success.', // 和卡片布局中對(duì)應(yīng)
      };
      let formInfo = formBindingData.createFormBindingData(formData)
      formProvider.updateForm(formId, formInfo).then((data) => {
        console.info('FormAbility updateForm success.' + JSON.stringify(data));
      }).catch((error) => {
        console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
      })
    }
  
    ...
  }

  運(yùn)行效果如下圖所示。