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

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

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

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

实现效果

分享
微博
QQ
微信
回复
2024-06-14 22:42:15
相关问题
readonly修饰数组无法获取数组元素
580浏览 • 1回复 待解决
如何实现Fraction加载功能?
6130浏览 • 1回复 待解决
如何实现对字节数组进行解压
483浏览 • 0回复 待解决
界面内容瀑布流加载实现
494浏览 • 1回复 待解决
ForEach数组数据无法传输
4021浏览 • 1回复 待解决
Tabs组件加载问题
859浏览 • 1回复 待解决
使用LazyForEach加载列表相关问题
353浏览 • 1回复 待解决
WantAgentInfo中wants为什么是数组
694浏览 • 1回复 待解决
LazyForEach加载原理是什么
885浏览 • 1回复 待解决
class二次刷新渲染数组
325浏览 • 1回复 待解决
如何监听数组内对象属性变化
1155浏览 • 1回复 待解决
grid组件及数据加载
444浏览 • 1回复 待解决
ArkTS和Native互传数组类型数据
560浏览 • 1回复 待解决
ArkTS如何把string转为byte数组
1351浏览 • 1回复 待解决
JS 卡片 ,JAVA 怎么给 这边传数组
4871浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人