harmony 鸿蒙通过message事件刷新卡片内容

  • 2023-06-24
  • 浏览 (707)

通过message事件刷新卡片内容

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

说明:

本文主要介绍动态卡片的事件开发。对于静态卡片,请参见FormLink

  • 在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用postCardAction接口触发message事件拉起FormExtensionAbility。卡片页面中使用LocalStorageProp装饰需要刷新的卡片数据。
  let storage = new LocalStorage();
  @Entry(storage)
  @Component
  struct WidgetCard {
    @LocalStorageProp('title') title: string = 'Title default';
    @LocalStorageProp('detail') detail: string = 'Description default';
  
    build() {
      Column() {
        Column() {
          Text(`${this.title}`)
            .margin(5).fontWeight(FontWeight.Medium).fontSize('14fp')
          Text(`${this.detail}`)
            .margin(5).fontColor(Color.Gray).fontSize('12fp').height('25%')
        }.width('100%').alignItems(HorizontalAlign.Start)
        Button('UPDATE')
          .margin(15).width('90%')
          .onClick(() => {
            postCardAction(this, {
              'action': 'message',
              'params': {
                'msgTest': 'messageEvent'
              }
            });
          })
      }.width('90%').height('90%').margin('5%')
    }
  }
  • 在FormExtensionAbility的onFormEvent生命周期中调用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: string, message: string) {
      // Called when a specified message event defined by the form provider is triggered.
      console.info(`FormAbility onFormEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);
      let formData = new Map<Object, string>();
      formData.set('title', 'Title Update.'); // 和卡片布局中对应
      formData.set('detail', 'Description update success.'); // 和卡片布局中对应
      let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
      formProvider.updateForm(formId, formInfo).then(() => {
        console.info('FormAbility updateForm success.');
      });
    }

    ...
  }

运行效果如下图所示。

初始状态 点击刷新
WidgetUpdateBefore WidgetUpdateAfter

你可能感兴趣的鸿蒙文章

harmony 鸿蒙应用模型

harmony 鸿蒙使用显式Want启动应用组件

harmony 鸿蒙使用隐式Want打开网址

harmony 鸿蒙AbilityStage组件容器

harmony 鸿蒙访问DataAbility

harmony 鸿蒙FA模型访问Stage模型DataShareExtensionAbility

harmony 鸿蒙AccessibilityExtensionAbility

harmony 鸿蒙常见action与entities

harmony 鸿蒙API切换概述

harmony 鸿蒙app和deviceConfig的切换

0  赞