1# 通过message事件刷新卡片内容 2 3在卡片页面中可以通过**postCardAction**接口触发message事件拉起FormExtensionAbility，然后由FormExtensionAbility刷新卡片内容，下面是这种刷新方式的简单示例。 4 5> **说明：** 6> 7> 本文主要介绍动态卡片的事件开发。对于静态卡片，请参见[FormLink](../reference/arkui-ts/ts-container-formlink.md)。 8 9- 在卡片页面通过注册Button的onClick点击事件回调，并在回调中调用**postCardAction**接口触发message事件拉起FormExtensionAbility。卡片页面中使用[LocalStorageProp](../quick-start/arkts-localstorage.md#localstorageprop)装饰需要刷新的卡片数据。 10 11 ```ts 12 let storage = new LocalStorage(); 13 @Entry(storage) 14 @Component 15 struct WidgetCard { 16 @LocalStorageProp('title') title: string = 'Title default'; 17 @LocalStorageProp('detail') detail: string = 'Description default'; 18 19 build() { 20 Column() { 21 Column() { 22 Text(`${this.title}`) 23 .margin(5).fontWeight(FontWeight.Medium).fontSize('14fp') 24 Text(`${this.detail}`) 25 .margin(5).fontColor(Color.Gray).fontSize('12fp').height('25%') 26 }.width('100%').alignItems(HorizontalAlign.Start) 27 Button('UPDATE') 28 .margin(15).width('90%') 29 .onClick(() => { 30 postCardAction(this, { 31 action: 'message', 32 params: { 33 msgTest: 'messageEvent' 34 } 35 }); 36 }) 37 }.width('90%').height('90%').margin('5%') 38 } 39 } 40 ``` 41 42- 在FormExtensionAbility的onFormEvent生命周期中调用[updateForm](../reference/apis/js-apis-app-form-formProvider.md#updateform)接口刷新卡片。 43 44 ```ts 45 import formBindingData from '@ohos.app.form.formBindingData'; 46 import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility'; 47 import formProvider from '@ohos.app.form.formProvider'; 48 49 export default class EntryFormAbility extends FormExtensionAbility { 50 onFormEvent(formId: string, message: string) { 51 // Called when a specified message event defined by the form provider is triggered. 52 console.info(`FormAbility onFormEvent, formId = ${formId}, message: ${JSON.stringify(message)}`); 53 class FormDataClass{ 54 title: string = 'Title Update.' // 和卡片布局中对应 55 detail: string = 'Description update success.' // 和卡片布局中对应 56 } 57 let formData = new FormDataClass(); 58 let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData); 59 formProvider.updateForm(formId, formInfo).then(() => { 60 console.info('FormAbility updateForm success.'); 61 }); 62 } 63 ... 64 } 65 ``` 66 67 运行效果如下图所示。 68 69 | 初始状态 | 点击刷新 | 70 | ------------------------------------------------------- | ----------------------------------------------------- | 71 |  |  | 72
