[文章]基于鸿蒙Next模拟卡片数据数据更新

一、介绍

基于鸿蒙Next模拟卡片数据数据更新
二、场景需求

电商平台产品信息更新、

客户关系管理（CRM）系统、

社交媒体用户资料更新、

健康管理系统、

项目管理工具、

金融服务应用、

教育管理系统、

在线订餐平台、
三、业务步骤

第一步：输入框输入数据

第二部：保存数据

第三步：返回桌面，点击卡片上的刷新按钮

第四步：刷新卡片数据
四、效果展示

五：代码展示：

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
import preferences from '@ohos.data.preferences';
import common from '@ohos.app.ability.common';
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';

let context = getContext(this) as common.UIAbilityContext

@Entry
@Component
struct Index07 {
  @State userName: string = ''
  @State userAge: string = ''
  @State userSex: string = ''
  //控制器
  TextAreaController: TextAreaController = new TextAreaController()

  @Styles
  RowTextInput(){
    .width('100%')
    .margin({ top: 10, left: 10 })
  }

  //本地数据-保存
  preferencesFun() {


    preferences.getPreferences(context, "CardData", (err, pf) => {
      if (err) {
        console.error("preferences failed to code =" + err.code + ";;; message =" + err.message);
        return;
      }
      pf.put('userName', this.userName)
      pf.put('userAge', this.userAge)
      pf.put('userSex', this.userSex)
      pf.flush()
    })
  }

  build() {
    Column() {
      //主体内容-我的卡片
      Column() {
        Column() {
          TextInput({ placeholder: '请输入名字...' })
            .width('80%')
            .onChange((value: string) => {
              this.userName = value
            })
            .margin({ bottom: 20 })
            .backgroundColor(0Xeeeeee)

          TextInput({ placeholder: '请输入年龄...' })
            .width('80%')
            .onChange((value: string) => {
              this.userAge = value
            })
            .margin({ bottom: 20 })
            .backgroundColor(0Xeeeeee)

          TextInput({ placeholder: '请输入性别...' })
            .width('80%')
            .onChange((value: string) => {
              this.userSex = value
            })
            .margin({ bottom: 20 })
            .backgroundColor(0Xeeeeee)

        }.width("100%").alignItems(HorizontalAlign.Center)

        Row() {
          Button('保存到卡片')
            .onClick(() => {
              this.preferencesFun()
            })
        }.width('100%')
        .justifyContent(FlexAlign.Center)

      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Start)
      .margin({ bottom: 56 })
      .padding({ right: 12, left: 12 })

    }
  }
}


Widget_zk
let storageUpdateByMsg = new LocalStorage();

@Entry(storageUpdateByMsg)
@Component
struct UpdateByMessageCard {
  @LocalStorageProp('userName') userName: ResourceStr = "李靖婷";
  @LocalStorageProp('userAge') userAge: ResourceStr = "18";
  @LocalStorageProp('userSex') userSex: ResourceStr = "女";

  build() {
    Column() {
      Column() {
        Text(this.userName)
          .opacity(0.9)
          .fontSize(14)
        Text(this.userAge)
          .opacity(0.6)
          .fontSize(12)
        Text(this.userSex)
          .opacity(0.6)
          .fontSize(12)
      }.width('100%')
      .height(80)
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)

      Row() {
        Button('刷新')
        .width(120)
        .borderRadius(16)
        .onClick(() => {
          postCardAction(this, {
            action: 'message',
            params: { msgTest: 'messageEvent' }
          });
        })
      }.width('100%').height('40%')
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
    .backgroundImageSize(ImageSize.Cover)
  }
}

EntryFormAbility.ets

import { formBindingData, FormExtensionAbility, formInfo, formProvider } from '@kit.FormKit';
import { Want } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import preferences from '@ohos.data.preferences';
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG: string = 'EntryFormAbility';
const DOMAIN_NUMBER: number = 0xFF00;

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want: Want) {
    // Called to return a FormBindingData object.
    let formData = '';
    return formBindingData.createFormBindingData(formData);
  }

  onCastToNormalForm(formId: string) {
    // Called when the form provider is notified that a temporary form is successfully
    // converted to a normal form.
  }

  onUpdateForm(formId: string) {
    // Called to notify the form provider to update a specified form.
  }

  onFormEvent(formId: string, message: string) {
    // Called when a specified message event defined by the form provider is triggered.
    hilog.info(DOMAIN_NUMBER, TAG, `FormAbility onFormEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);

    preferences.getPreferences(this.context,'CardData',(err,pf)=>{

      class FormDataClass {
        userName = pf.get('userName', '')
        userAge = pf.get('userAge', '')
        userSex = pf.get('userSex', '')
      }
      let formData = new FormDataClass();
      let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
      formProvider.updateForm(formId, formInfo).then(() => {
        hilog.info(DOMAIN_NUMBER, TAG, 'FormAbility updateForm success.');
      }).catch((error: BusinessError) => {
        hilog.info(DOMAIN_NUMBER, TAG, `Operation updateForm failed. Cause: ${JSON.stringify(error)}`);
      })
    })

  }

  onRemoveForm(formId: string) {
    // Called to notify the form provider that a specified form has been destroyed.
  }
  onAcquireFormState(want: Want) {
    // Called to return a {@link FormState} object.
    return formInfo.FormState.READY;
  }
};

六、代码结构及原理：
1.整体结构 ：

使用了ArkTS的装饰器语法，如@Entry和@Component组件。使用了动态卡片添加之桌面
2.状态管理：

组件使用@State装饰器定义了几个响应式状态变量
3.UI结构：

主要界面使用嵌套的Column和Row组件构建。
4.数据传递：

当点击"保存"按钮时,主页面会调用preferencesFun（）回调函数来本地化保存数据，当点击"刷新"按钮时，会调用postCardAction（）回调函数，回调卡片控制器的onFormEvent（）函数，更新卡片数据。