回复
#HarmonyOS NEXT 体验官#卡片数据更新 原创
鸿蒙时代
发布于 2024-8-3 10:08
浏览
0收藏
一、介绍
基于鸿蒙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()函数,更新卡片数据。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
赞
收藏
回复
相关推荐