HarmonyOS 双层懒加载如何改变内层数据并同时渲染DEMO

HarmonyOS
2024-12-27 14:22:08
662浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Excelsior_abit

参考demo:

@Entry
@Component
struct LazyForeach_Double {
  private list: MyDataSource2 = new MyDataSource2()
  @Builder
  itemHead(text: string) {
    Text(text)
      .fontSize(20)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(10)
  }
  @Builder
  itemFoot(num: number) {
    Text('共' + num + "节课")
      .fontSize(16)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(5)
  }
  aboutToAppear() {
    /*for (let date = 1; date < ~~(Math.random() * 30) + 3; date++) {
      let dayData = new dateListItem(date + "")
      for (let index = 1; index < ~~(Math.random() * 100) + 30; index++) {
        dayData.orderList.pushData(`hello${index}`)
      }
      this.list.pushData(dayData)
    }*/
    for (let date = 1; date < 33; date++) {
      let dayData = new dateListItem(date + "")
      for (let index = 1; index < 20; index++) {
        dayData.orderList.pushData(`hello${index}`)
      }
      this.list.pushData(dayData)
    }
  }
 build() {
    Column() {
      List({ space: 20 }) {
        LazyForEach(this.list, (item: dateListItem, index) => {
          ListItemGroup({ header: this.itemHead(item.date + ""), footer: this.itemFoot(item.orderList.totalCount()) }) {
            LazyForEach(item.orderList, (order: string, index2) => {
              ListItem() {
                Text(order)
                  .onAppear(() => {
                    console.info("appear:" + order, index2 + "")
                  })
                  .width("100%")
                  .height(60)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(0xFFFFFF)
              }
              .onClick(() => {
                let orderList_now = this.list.getData(index).orderList
                orderList_now.ChangeData(index2 , '++++')
                console.log('点击改变item +++ ')
              })
            }, (item: string) => item)
          }
          .onAppear(() => {
            console.info("appear:" + item, index + "")
          })
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
        })
      }
      .cachedCount(1)
      .width('90%')
      .sticky(StickyStyle.Header | StickyStyle.Footer)
      .scrollBar(BarState.Off)
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}
// Basic implementation of IDataSource to handle data listener
class BasicDataSource_Double implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];
  public totalCount(): number {
    return 0;
  }
  public getData(index: number): string | dateListItem {
    return this.originDataArray[index];
  }
  // 该方法为框架侧调用,为LazyForEach组件向其数据源处添加listener监听
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }
  // 该方法为框架侧调用,为对应的LazyForEach组件在数据源处去除listener监听
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }
  // 通知LazyForEach组件需要重载所有子组件
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }
  // 通知LazyForEach组件需要在index对应索引处添加子组件
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }
  // 通知LazyForEach组件在index对应索引处数据有变化,需要重建该子组件
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }
  // 通知LazyForEach组件需要在index对应索引处删除该子组件
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }
}
// 内层数据
class MyDataSource1 extends BasicDataSource_Double {
  private dataArray: string[] = [];
  public totalCount(): number {
    return this.dataArray.length;
  }
  public getData(index: number): string {
    return this.dataArray[index];
  }
  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }
  public pushData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
  public ChangeData(index: number, data: string): void {
    this.dataArray[index] = data;
    this.notifyDataChange(index);
  }
}
// 外层数据
class MyDataSource2 extends BasicDataSource_Double {
  private dataArray: dateListItem[] = [];
  public totalCount(): number {
    return this.dataArray.length;
  }
  public getData(index: number): dateListItem {
    return this.dataArray[index];
  }
  public addData(index: number, data: dateListItem): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }
  public pushData(data: dateListItem): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}
class dateListItem {
  date: string
  orderList: MyDataSource1
  constructor(date: string) {
    this.date = date
    this.orderList = new MyDataSource1()
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
分享
微博
QQ
微信
回复
2024-12-27 17:13:27


相关问题
HarmonyOS 加载数据删除问题
1248浏览 • 1回复 待解决
grid组件及数据加载
1598浏览 • 1回复 待解决
HarmonyOS 加载
595浏览 • 1回复 待解决
如何实现Fraction加载功能?
8011浏览 • 1回复 待解决
HarmonyOS tabContent加载问题
536浏览 • 1回复 待解决
HarmonyOS LazyForEach 不会加载原因
735浏览 • 1回复 待解决
HarmonyOS Tabs 切换无法加载
491浏览 • 1回复 待解决
HarmonyOS 列表展示list加载问题
1289浏览 • 1回复 待解决
Tabs组件加载的问题
2874浏览 • 1回复 待解决
在鸿蒙中如何实现页面的加载?
751浏览 • 0回复 待解决
LazyForEach加载的原理是什么
3283浏览 • 1回复 待解决
界面内容瀑布流加载实现
1815浏览 • 1回复 待解决