grid组件及数据懒加载

@Entry 
@Component 
struct GridExample { 
  // 定义一个长度为16的数组 
  /** 
   * 经查阅资料，此处参数意思详细为map((item,index,arr) => `item ${index}`); 
 
   * item代表操作数组中的项 
 
   * index代表操作数组中的项的索引 
 
   * arr代表要操作的数组 
 
   * 具体参数名任意，所以此处的下划线_是一个标识符，代表数组中的项 
   */ 
  private arr: string[] = new Array(16).fill('').map((item: string, index,) => `item ${index}`); 
 
  build() { 
    Column() { 
      Grid() { 
        ForEach(this.arr, (item: string) => { 
          GridItem() { 
            Text(item) 
              .fontSize(16) 
              .fontColor(Color.White) 
              .backgroundColor(0x007DFF) 
              .width('100%') 
              .height('100%') 
              .textAlign(TextAlign.Center) 
          } 
        }, (item: string) => item) 
      } 
      .columnsTemplate('1fr 1fr 1fr 1fr') 
      .rowsTemplate('1fr 1fr 1fr 1fr') 
      .columnsGap(10) 
      .rowsGap(10) 
      .height(300) 
    } 
    .width('100%') 
    .padding(12) 
    .backgroundColor(0xF1F3F5) 
  } 
}

@Entry 
@Component 
struct GridExample { 
  //仅设置columnsTemplate属性，不设置rowsTemplate属性，就可以实现Grid列表的滚动 
  private arr: string[] = new Array(16).fill('').map((item: string, index,) => `item ${index}`); 
 
  build() { 
    Column() { 
      Grid() { 
        ForEach(this.arr, (item: string) => { 
          GridItem() { 
            Text(item) 
              .fontSize(16) 
              .fontColor(Color.White) 
              .backgroundColor(0x007DFF) 
              .width('100%') 
              .height(100) 
              .textAlign(TextAlign.Center) 
          } 
        }, (item: string) => item) 
      } 
      .columnsTemplate('1fr 1fr 1fr 1fr') 
 
      .columnsGap(10) 
      .rowsGap(10) 
      .height(300) 
    } 
    .width('100%') 
    .padding(12) 
    .backgroundColor(0xF1F3F5) 
  } 
}

// Basic implementation of IDataSource to handle data listener 
// IDataSource处理数据监听器的基本实现 
class BasicDataSource implements IDataSource { 
  private listeners: DataChangeListener[] = []; // 数据监听器 
  private originDataArray: string[] = []; 
 
  //获得数据总数 
  public totalCount(): number { 
    return 0; 
  } 
 
  // 获取索引值对应的数据 
  public getData(index: number): string { 
    return this.originDataArray[index]; 
  } 
 
  // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听 
  registerDataChangeListener(listener: DataChangeListener): void { 
    if (this.listeners.indexOf(listener) < 0) { // 返回某个值在数组中第一次出现的索引，如果不存在则返回-1， 
      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 MyDataSource extends BasicDataSource { 
  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); 
  } 
} 
 
@Entry 
@Component 
struct MyComponent { 
  private arr: string[] = new Array(100).fill('').map((item: string, index,) => `item ${index}`); 
  private data: MyDataSource = new MyDataSource(); 
 
  aboutToAppear() { 
    for (let i = 0; i < this.arr.length; i++) { 
      this.data.pushData(this.arr[i]); 
    } 
    // for (let i = 0; i <= 20; i++) { 
    //   this.data.pushData(`Hello ${i}`) 
    // } 
  } 
 
  build() { 
    Column() { 
      Grid() { 
        LazyForEach(this.data, (item: string) => { 
          GridItem() { 
            Text(item) 
              .fontSize(16) 
              .fontColor(Color.White) 
              .backgroundColor(0x007DFF) 
              .width('100%') 
              .height(100) 
              .textAlign(TextAlign.Center) 
              .onAppear(()=>{ 
                console.info('appear:'+item) 
              }) 
          } 
        }, (item: string) => item) 
      } 
      .cachedCount(5)   //先加载10个 
      .columnsTemplate('1fr 1fr 1fr 1fr') 
      .columnsGap(10) 
      .rowsGap(10) 
      .height(300) 
    } 
    .width('100%') 
    .padding(12) 
    .backgroundColor(Color.White) 
  } 
}