数组嵌套数组场景的懒加载实现

数组中嵌套数组，使用List组件时ListItemGroup和ListItem都需要懒加载的话如何实现，更好提升滑动场景的性能。

使用的OS能力相关的核心API

LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
@Reusable装饰器修饰自定义组件，表示组件可以被复用，结合LazyForEach懒加载一起使用，可以进一步解决列表滑动场景的瓶颈问题，提供滑动场景下高性能创建组件的方式来提升滑动帧率。
HashMap底层使用数组+链表+红黑树的方式实现，查询、插入和删除的效率都很高。

HarmonyOS

jshyb

2024-06-13 23:33:34

浏览

回答 1

待解决

回答 1

按赞同

按时间

pumayze

定义数据元可支持TimeTable[] | Array，可支持TimeTable和string类型的数据源。

export  default class MyDataSource extends BasicDataSource { 
  private dataArray: TimeTable[] | Array<string> = [] 
 
  constructor(Datas: Array<TimeTable> | Array<string>) { 
    super() 
    this.dataArray = Datas 
  } 
 
  public totalCount(): number { 
    return this.dataArray.length; 
  } 
 
  public getData(index: number): TimeTable | string { 
    return this.dataArray[index]; 
  } 
 
  public addDataTimeTable(index: number, data: TimeTable): void { 
    this.dataArray.splice(index, 0, data); 
    this.notifyDataAdd(index); 
  } 
 
  public addDataString(index: number, data: string): void { 
    this.dataArray.splice(index, 0, data); 
    this.notifyDataAdd(index); 
  } 
 
  public pushDataTimeTable(data: TimeTable): void { 
    (this.dataArray as Array<TimeTable>).push(data); 
    this.notifyDataAdd(this.dataArray.length - 1); 
  } 
 
  public pushDataString(data: string): void { 
    (this.dataArray as Array<string>).push(data); 
    this.notifyDataAdd(this.dataArray.length - 1); 
  } 
}

使用@Reusable修饰自定义组件，配合LazyForEach提高加载数据与渲染效率。

@Component 
@Reusable 
export default struct TimeTableComponent{ 
  @State timeTable: TimeTable[]=[] 
  private data: MyDataSource = new MyDataSource(this.timeTable); 
  private hashMap: HashMap<string,MyDataSource> = new HashMap(); 
  
  build() { 
    Column(){ 
      List() { 
        LazyForEach(this.data, (item: TimeTable) => { 
          ListItemGroup({ header: itemHead(item.title), footer: itemFoot(item.projects.length) }) { 
            LazyForEach(this.hashMap.get(item.title), (project: string) => { 
              ListItem() { 
                Text(project) 
                  .width("100%") 
                  .height(100) 
                  .fontSize(20) 
                  .textAlign(TextAlign.Center) 
                  .backgroundColor(0xFFFFFF) 
              } 
            }, (item: string) => item) 
          } 
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线 
        }, (item: string) => item) 
      }.cachedCount(5) 
    } 
  } 
} 
  
@Builder 
function itemHead(text: string) { 
  Text(text) 
    .fontSize(20) 
    .backgroundColor(0x00BBCC) 
    .width("100%") 
    .padding(10) 
} 
  
@Builder 
function itemFoot(num: number) { 
  Text('共' + num + "节课") 
    .fontSize(16) 
    .backgroundColor(0xAABBDD) 
    .width("100%") 
    .padding(5) 
}

实现效果

2024-06-14 22:42:15

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

数组嵌套数组场景的懒加载实现

订阅鸿蒙技术特刊，精选内容抢先看