用几个域名做网站好,东莞横沥网站制作,外链发布网站,wordpress空两格【HarmonyOS】List组件多层对象嵌套ForEach渲染更新的处理
问题背景#xff1a; 在鸿蒙中UI更新渲染的机制#xff0c;与传统的Android IOS应用开发相比。开发会简单许多#xff0c;开发效率提升显著。
一般传统应用开发的流程处理分为三步#xff1a;1.画UI#xff0c;…【HarmonyOS】List组件多层对象嵌套ForEach渲染更新的处理
问题背景 在鸿蒙中UI更新渲染的机制与传统的Android IOS应用开发相比。开发会简单许多开发效率提升显著。
一般传统应用开发的流程处理分为三步1.画UI2.获得or创建处理数据3.增删改数据找到对应控件更新到UI上。
而鸿蒙应用开发大大提供效率其中一点就是减少了第三步。我们只需要关心数据源的变化数据自动会更新到对应的控件上。
这种处理机制其实符合应用开发的时代潮流目前Android和IOS最新框架机制都有相应类似的处理。例如swiftUICompose。并且VueFlutter整个刷新机制就是如此。
众所周知在HarmonyOs的list组件渲染中如果数据源列表对象是多个对象嵌套的处理那最底层对象的属性更新时UI界面是不会渲染的。因为检测不到目前只能检测到第一层对象。
解决方案
当然官方的api在持续迭代的过程中。对于冗余渲染渲染的性能提升还有多层对象嵌套的数据源更新问题一直再迭代方法处理。
针对多层对象嵌套底层对象属性修改后UI不渲染的问题有个比较简单又方便的处理方式思路仅供参考。
即深拷贝修改的item对象。
这样整个对象相当于都变化了就符合第一层对象检测的机制可以被系统捕获到刷新。
DEMO示例
import { util } from kit.ArkTS;/*** 二级数据结构*/
class ChildInfo {index: number;constructor(index: number) {this.index index;}
}/*** 一级数据结构*/
class ItemInfo {key: string util.generateRandomUUID(true);name: string;icon: Resource;childInfo: ChildInfo;select: boolean;constructor(name: string, icon: Resource, index: number) {this.name name;this.icon icon;this.childInfo new ChildInfo(index);this.select false;}/*** 重新创建对象深拷贝处理* param itemInfo* param index* returns*/static deepCopy(itemInfo: ItemInfo, index: number){let info: ItemInfo new ItemInfo(itemInfo.name, itemInfo.icon, index);info.select itemInfo.select;info.key itemInfo.key;info.childInfo itemInfo.childInfo;return info;}
}/****/
Entry
Component
struct ForeachPage {private TAG: string ForeachPage;State mListData: ArrayItemInfo [];aboutToAppear(): void {this.mListData.push(new ItemInfo(游戏, $r(app.media.iconA), 1));this.mListData.push(new ItemInfo(游戏, $r(app.media.iconB), 2));this.mListData.push(new ItemInfo(游戏, $r(app.media.iconA), 3));this.mListData.push(new ItemInfo(游戏, $r(app.media.iconB), 4));this.mListData.push(new ItemInfo(游戏, $r(app.media.iconA), 5));this.mListData.push(new ItemInfo(游戏, $r(app.media.iconB), 6));}Builder ItemView(item: ItemInfo, index: number){Row() {Image(item.icon).width(px2vp(120)).height(px2vp(120))Text(item.name ( item.childInfo.index )).fontSize(20)Blank()if(this.isLog(item, index)){if(item.select){Image($r(app.media.icon_check)).size({width: px2vp(72),height: px2vp(72)})}}}.width(100%).justifyContent(FlexAlign.Start).onClick((){item.select !item.select;if(item.select){item.childInfo.index 666;}else{item.childInfo.index index;}this.mListData[index] ItemInfo.deepCopy(item, item.childInfo.index);console.log(this.TAG, ItemView onClick: index item.select: item.select);})}private isLog(item: ItemInfo, index: number){console.log(this.TAG, ItemView isLog index: index item.select: item.select);return true;}build() {List() {ForEach(this.mListData, (item: ItemInfo, index: number) {ListItem() {this.ItemView(item, index)}}, (item: ItemInfo) JSON.stringify(item))//}.width(100%).height(100%).padding({ left: px2vp(60), right: px2vp(60) })}
}
