HarmonyOS 鸿蒙Next IDataSource的使用

LazyForEachPage.ets

import { BasicDataSource } from './BasicDataSource'
import { showToast } from './Toast'

@Entry
@Component
struct LazyForEachPage {
  dataSource: BasicDataSource<IModel> = new BasicDataSource()
  uuids: string[] = [
    "你好哇",
    "李银河",
    "解放军",
    "三大件",
    "世界很美好"
  ]

  addData(len: number, tips: string) {
    for (let index = 0; index < len; index++) {
      let model: IModel = {
        title: tips,
        subTitle: this.uuids[index],
        creatTime: generateUnixTimestamp().toString()
      }
      this.dataSource.pushData(model)
    }
  }

  onPageShow(): void {
    this.addData(5, "添加原始数据")
  }

  build() {
    Column() {
      Text("先删除第0个元素，在点击第0个，数据错乱")
      Row({ space: 8 }) {
        Text("数据总量")
          .fontSize(20)
          .onClick(() =>{
            showToast(`总量:${this.dataSource.totalCount()}`)
          })

        Text("删除第0个数据")
          .backgroundColor(Color.Red)
          .fontSize(20)
          .onClick(() =>{
            this.dataSource.deleteData(0)
          })

      }

      List({ space: 8 }) {
        LazyForEach(this.dataSource, (item: IModel, index: number) => {
          ListItem() {
            createItem({item:item,index:index})
          }
          .padding(8)
          .width("100%")

        }, (item: IModel) => {
          return JSON.stringify(item)
        })
      }
    }
    .height('100%')
    .width('100%')
    .margin({ top: 20 })
  }
}

@Component
struct createItem {

  @State item:IModel = {
    title: '',
    subTitle: '',
    creatTime: ''
  }
  @State index:number = 0
  build() {
    Column({ space: 8 }) {
      Text(this.item.title+this.index.toString())
        .fontSize(20)
      Text(this.item.subTitle + this.item.creatTime)
        .fontSize(17)
    }
    .width("100%")
    .padding(8)
    .borderRadius(8)
    .backgroundColor(this.index % 2 === 0 ? Color.Red : Color.Orange)
    .onClick(() =>{
      showToast(` 当前索引:${this.item.subTitle}`+this.index.toString(),5)
    })
  }
}

interface IModel {
  title: string,
  subTitle?: string,
  creatTime: string
}

/*
* unix时间戳
*
*/
export function generateUnixTimestamp(): number {
  let tamp = Math.floor(new Date().getTime());
  return tamp
}