【HarmonyOS】List组件多层对象嵌套ForEach渲染更新的处理

【HarmonyOS】List组件多层对象嵌套ForEach渲染更新的处理

问题背景:

在鸿蒙中UI更新渲染的机制,与传统的Android IOS应用开发相比。开发会简单许多,开发效率提升显著。

一般传统应用开发的流程处理分为三步:1.画UI,2.获得or创建,处理数据,3.增删改数据,找到对应控件,更新到UI上。

而鸿蒙应用开发,大大提供效率其中一点,就是减少了第三步。我们只需要关心数据源的变化,数据自动会更新到对应的控件上。

这种处理机制,其实符合应用开发的时代潮流,目前Android和IOS最新框架机制都有相应类似的处理。例如swiftUI,Compose。并且Vue,Flutter整个刷新机制就是如此。

众所周知,在HarmonyOs的list组件渲染中,如果数据源列表对象是多个对象嵌套的处理,那最底层对象的属性更新时,UI界面是不会渲染的。因为检测不到,目前只能检测到第一层对象。

解决方案:

当然官方的api在持续迭代的过程中。对于冗余渲染,渲染的性能提升,还有多层对象嵌套的数据源更新问题,一直再迭代方法处理。

针对多层对象嵌套,底层对象属性修改后,UI不渲染的问题,有个比较简单又方便的处理方式,思路仅供参考。

即:深拷贝修改的item对象。

这样整个对象相当于都变化了,就符合第一层对象检测的机制,可以被系统捕获到刷新。

DEMO示例:

dart 复制代码
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: Array<ItemInfo> = [];

  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) })
  }
}



相关推荐
遇到困难睡大觉哈哈1 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划4 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说4 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu7 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉7 小时前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos
Fanmeang9 小时前
OSPF高级特性之FRR
运维·网络·华为·ip·ospf·spf·frr
kumalab9 小时前
HarmonyOS ArkTS卡片堆叠滑动组件实战与原理详解(含源码)
华为·harmonyos
别说我什么都不会10 小时前
【OpenHarmony】鸿蒙开发之xml2jsDemo
harmonyos
HarmonyOS_SDK14 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
harmonyos
zhanshuo15 小时前
鸿蒙操作系统核心特性解析:从分布式架构到高效开发的全景技术图谱
harmonyos