HarmonyOS实战开发：根据卡片状态刷新不同内容

最新推荐文章于 2024-05-20 21:19:44 发布

蜀道衫QAQ

最新推荐文章于 2024-05-20 21:19:44 发布

阅读量939

点赞数 23

分类专栏：鸿蒙文章标签： harmonyos 华为鸿蒙鸿蒙系统 android

本文链接：https://blog.csdn.net/2401_84194030/article/details/138216646

版权

鸿蒙专栏收录该内容

449 篇文章 5 订阅

订阅专栏

相同的卡片可以添加到桌面上实现不同的功能，比如添加两张桌面的卡片，一张显示杭州的天气，一张显示北京的天气，设置每天早上7点触发定时刷新，卡片需要感知当前的配置是杭州还是北京，然后将对应城市的天气信息刷新到卡片上，以下示例介绍了如何根据卡片的状态动态选择需要刷新的内容。

卡片配置文件：配置每天早上7点触发定时刷新。

{
  "forms": [
    {
      "name": "widget",
      "description": "This is a service widget.",
      "src": "./ets/widget/pages/WidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": true,
      "updateEnabled": true,
      "scheduledUpdateTime": "07:00",
      "updateDuration": 0,
      "defaultDimension": "2*2",
      "supportDimensions": ["2*2"]
    }
  ]
}

卡片页面：卡片具备不同的状态选择，在不同的状态下需要刷新不同的内容，因此在状态发生变化时通过postCardAction通知EntryFormAbility。

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('textA') textA: string = '待刷新...';
  @LocalStorageProp('textB') textB: string = '待刷新...';
  @State selectA: boolean = false;
  @State selectB: boolean = false;

  build() {
    Column() {
      Row() {
        Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
          .select(false)
          .onChange((value: boolean) => {
            this.selectA = value;
            postCardAction(this, {
              action: 'message',
              params: {
                selectA: JSON.stringify(value)
              }
            });
          })
        Text('状态A')
      }

      Row() {
        Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
          .select(false)
          .onChange((value: boolean) => {
            this.selectB = value;
            postCardAction(this, {
              action: 'message',
              params: {
                selectB: JSON.stringify(value)
              }
            });
          })
        Text('状态B')
      }

      Row() { // 选中状态A才会进行刷新的内容
        Text('状态A: ')
        Text(this.textA)
      }

      Row() { // 选中状态B才会进行刷新的内容
        Text('状态B: ')
        Text(this.textB)
      }
    }.padding('10%')
  }
}

EntryFormAbility：将卡片的状态存储在本地数据库中，在刷新事件回调触发时，通过formId获取当前卡片的状态，然后根据卡片的状态选择不同的刷新内容。

import formInfo from '@ohos.app.form.formInfo'
import formProvider from '@ohos.app.form.formProvider';
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import dataPreferences from '@ohos.data.preferences';
import Want from '@ohos.app.ability.Want';
import Base from '@ohos.base';

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want: Want) {
    let formId: string = '';
    let isTempCard: boolean;
    if (want.parameters) {
      formId = JSON.stringify(want.parameters[formInfo.FormParam.IDENTITY_KEY]);
      isTempCard = want.parameters[formInfo.FormParam.TEMPORARY_KEY] as boolean;
      if (isTempCard === false) { // 如果为常态卡片，直接进行信息持久化
        console.info('Not temp card, init db for:' + formId);
        let promise: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(this.context, 'myStore');
        promise.then(async (storeDB: dataPreferences.Preferences) => {
          console.info("Succeeded to get preferences.");
          await storeDB.put('A' + formId, 'false');
          await storeDB.put('B' + formId, 'false');
          await storeDB.flush();
        }).catch((err: Base.BusinessError) => {
          console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
        })
      }
    }
    let formData: Record<string, Object | string> = {};
    return formBindingData.createFormBindingData(formData);
  }

  onRemoveForm(formId: string) {
    console.info('onRemoveForm, formId:' + formId);
    let promise = dataPreferences.getPreferences(this.context, 'myStore');
    promise.then(async (storeDB) => {
      console.info("Succeeded to get preferences.");
      await storeDB.delete('A' + formId);
      await storeDB.delete('B' + formId);
      await storeDB.flush();
    }).catch((err: Base.BusinessError) => {
      console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
    })
  }

  // 如果在添加时为临时卡片，则建议转为常态卡片时进行信息持久化
  onCastToNormalForm(formId: string) {
    console.info('onCastToNormalForm, formId:' + formId);
    let promise: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(this.context, 'myStore');
    promise.then(async (storeDB: dataPreferences.Preferences) => {
      console.info("Succeeded to get preferences.");
      await storeDB.put('A' + formId, 'false');
      await storeDB.put('B' + formId, 'false');
      await storeDB.flush();
    }).catch((err: Base.BusinessError) => {
      console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
    })
  }

  onUpdateForm(formId: string) {
    let promise: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(this.context, 'myStore');
    promise.then(async (storeDB: dataPreferences.Preferences) => {
      console.info("Succeeded to get preferences.");
      let stateA = await storeDB.get('A' + formId, 'false');
      let stateB = await storeDB.get('B' + formId, 'false');
      // A状态选中则更新textA
      if (stateA === 'true') {
        let param: Record<string, string> = { 'textA': 'AAA' };
        let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);
        await formProvider.updateForm(formId, formInfo);
      }
      // B状态选中则更新textB
      if (stateB === 'true') {
        let param: Record<string, string> = { 'textB': 'BBB' };
        let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);
        await formProvider.updateForm(formId, formInfo);
      }
      console.info(`Update form success stateA:${stateA} stateB:${stateB}.`);
    }).catch((err: Base.BusinessError) => {
      console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
    })
  }

  onFormEvent(formId: string, message: string) {
    // 存放卡片状态
    console.info('onFormEvent formId:' + formId + 'msg:' + message);
    let promise: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(this.context, 'myStore');
    promise.then(async (storeDB: dataPreferences.Preferences) => {
      console.info("Succeeded to get preferences.");
      let msg: Record<string, string> = JSON.parse(message);
      if (msg.selectA != undefined) {
        console.info('onFormEvent selectA info:' + msg.selectA);
        await storeDB.put('A' + formId, msg.selectA);
      }
      if (msg.selectB != undefined) {
        console.info('onFormEvent selectB info:' + msg.selectB);
        await storeDB.put('B' + formId, msg.selectB);
      }
      await storeDB.flush();
    }).catch((err: Base.BusinessError) => {
      console.info(`Failed to get preferences. ${JSON.stringify(err)}`);
    })
  }
};

说明：

通过本地数据库进行卡片信息的持久化时，建议先在onAddForm生命周期中通过TEMPORARY_KEY判断当前添加的卡片是否为常态卡片：如果是常态卡片，则直接进行卡片信息持久化；如果为临时卡片，则可以在卡片转为常态卡片(onCastToNormalForm)时进行持久化；同时需要在卡片销毁(onRemoveForm)时删除当前卡片存储的持久化信息，避免反复添加删除卡片导致数据库文件持续变大。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料