通过message事件刷新卡片内容

2024-01-25 12:21 更新

在卡片页面中可以通过postCardAction接口触发message事件拉起FormExtensionAbility,然后由FormExtensionAbility刷新卡片内容,下面是这种刷新方式的简单示例。

  • 在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用postCardAction接口触发message事件拉起FormExtensionAbility。
    1. let storage = new LocalStorage();
    2. @Entry(storage)
    3. @Component
    4. struct WidgetCard {
    5. @LocalStorageProp('title') title: string = 'init';
    6. @LocalStorageProp('detail') detail: string = 'init';
    7. build() {
    8. Column() {
    9. Button('刷新')
    10. .onClick(() => {
    11. postCardAction(this, {
    12. 'action': 'message',
    13. 'params': {
    14. 'msgTest': 'messageEvent'
    15. }
    16. });
    17. })
    18. Text(`${this.title}`)
    19. Text(`${this.detail}`)
    20. }
    21. .width('100%')
    22. .height('100%')
    23. }
    24. }
  • 在FormExtensionAbility的onFormEvent生命周期中调用updateForm接口刷新卡片。
    1. import formBindingData from '@ohos.app.form.formBindingData';
    2. import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
    3. import formProvider from '@ohos.app.form.formProvider';
    4. export default class EntryFormAbility extends FormExtensionAbility {
    5. onFormEvent(formId, message) {
    6. // Called when a specified message event defined by the form provider is triggered.
    7. console.info(`FormAbility onEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);
    8. let formData = {
    9. 'title': 'Title Update Success.', // 和卡片布局中对应
    10. 'detail': 'Detail Update Success.', // 和卡片布局中对应
    11. };
    12. let formInfo = formBindingData.createFormBindingData(formData)
    13. formProvider.updateForm(formId, formInfo).then((data) => {
    14. console.info('FormAbility updateForm success.' + JSON.stringify(data));
    15. }).catch((error) => {
    16. console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
    17. })
    18. }
    19. ...
    20. }

    运行效果如下图所示。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号