1# 通过message事件刷新卡片内容 2 3在卡片页面中可以通过[postCardAction](../reference/apis-arkui/js-apis-postCardAction.md#postcardaction)接口触发message事件拉起FormExtensionAbility,然后由FormExtensionAbility刷新卡片内容,下面是这种刷新方式的简单示例。 4 5> **说明:** 6> 7> 本文主要介绍动态卡片的事件开发。对于静态卡片,请参见[FormLink](../reference/apis-arkui/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 storageUpdateByMsg = new LocalStorage(); 13 14 @Entry(storageUpdateByMsg) 15 @Component 16 struct UpdateByMessageCard { 17 @LocalStorageProp('title') title: ResourceStr = $r('app.string.default_title'); 18 @LocalStorageProp('detail') detail: ResourceStr = $r('app.string.DescriptionDefault'); 19 20 build() { 21 Column() { 22 Column() { 23 Text(this.title) 24 .fontColor('#FFFFFF') 25 .opacity(0.9) 26 .fontSize(14) 27 .margin({ top: '8%', left: '10%' }) 28 Text(this.detail) 29 .fontColor('#FFFFFF') 30 .opacity(0.6) 31 .fontSize(12) 32 .margin({ top: '5%', left: '10%' }) 33 }.width('100%').height('50%') 34 .alignItems(HorizontalAlign.Start) 35 36 Row() { 37 Button() { 38 Text($r('app.string.update')) 39 .fontColor('#45A6F4') 40 .fontSize(12) 41 } 42 .width(120) 43 .height(32) 44 .margin({ top: '30%', bottom: '10%' }) 45 .backgroundColor('#FFFFFF') 46 .borderRadius(16) 47 .onClick(() => { 48 postCardAction(this, { 49 action: 'message', 50 params: { msgTest: 'messageEvent' } 51 }); 52 }) 53 }.width('100%').height('40%') 54 .justifyContent(FlexAlign.Center) 55 } 56 .width('100%') 57 .height('100%') 58 .alignItems(HorizontalAlign.Start) 59 .backgroundImage($r('app.media.CardEvent')) 60 .backgroundImageSize(ImageSize.Cover) 61 } 62 } 63 ``` 64 65- 在FormExtensionAbility的onFormEvent生命周期中调用[updateForm](../reference/apis-form-kit/js-apis-app-form-formProvider.md#updateform)接口刷新卡片。 66 67 ```ts 68 import { BusinessError } from '@kit.BasicServicesKit'; 69 import { formBindingData, FormExtensionAbility, formProvider } from '@kit.FormKit'; 70 import { hilog } from '@kit.PerformanceAnalysisKit'; 71 72 const TAG: string = 'EntryFormAbility'; 73 const DOMAIN_NUMBER: number = 0xFF00; 74 75 export default class EntryFormAbility extends FormExtensionAbility { 76 onFormEvent(formId: string, message: string): void { 77 // Called when a specified message event defined by the form provider is triggered. 78 hilog.info(DOMAIN_NUMBER, TAG, `FormAbility onFormEvent, formId = ${formId}, message: ${JSON.stringify(message)}`); 79 80 class FormDataClass { 81 title: string = 'Title Update.'; // 和卡片布局中对应 82 detail: string = 'Description update success.'; // 和卡片布局中对应 83 } 84 85 let formData = new FormDataClass(); 86 let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData); 87 formProvider.updateForm(formId, formInfo).then(() => { 88 hilog.info(DOMAIN_NUMBER, TAG, 'FormAbility updateForm success.'); 89 }).catch((error: BusinessError) => { 90 hilog.info(DOMAIN_NUMBER, TAG, `Operation updateForm failed. Cause: ${JSON.stringify(error)}`); 91 }) 92 } 93 //... 94 } 95 ``` 96 97 运行效果如下图所示。 98 99 | 初始状态 | 点击刷新 | 100 | ------------------------------------------------------- | ----------------------------------------------------- | 101 |  |  | 102