devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙HarmonyOS实战-ArkTS语言（渲染控制）_unction return type inference is limited (arkts-no

作者：2023面试高手 | 2024-02-21 14:30:39

赞

踩

unction return type inference is limited (arkts-no-implicit-return-types)

 前言

编程语言中都有自己基本的控制结构，它们在程序设计中起到了非常重要的作用。以下是几个原因：

分支控制： 在程序执行过程中，有时需要根据不同的条件分支来执行不同的代码逻辑。if/else结构通过判断条件来决定程序如何执行，实现了程序的分支控制。

数据迭代： 在程序中，需要对一些数据进行遍历、操作或者计算。ForEach和LazyForEach提供了一种便捷的方法，可以针对数据集合进行遍历，并对其中的每个元素执行特定操作。

惰性计算： 在某些情况下，程序中需要对大量的数据进行遍历或计算。LazyForEach可以实现惰性计算，只在需要时才计算相应的结果，避免了程序在运行时不必要的计算，从而提高程序效率。

一、ArkTS语言渲染控制

ArkTS是一种基于TypeScript的编程语言，支持对渲染过程进行控制和调整。以下是ArkTS语言中实现渲染控制的三个关键组件：

  1. if/else：if/else结构可以用于根据条件控制是否渲染某些元素。例如，可以通过if/else语句来实现某些物体在特定场景或条件下的显示或隐藏。

  2. ForEach：ForEach是一个迭代方法，能够遍历数组、对象等数据结构中的元素，并在渲染过程中对它们进行控制。例如，可以使用ForEach在场景中定位并控制多个物体的位置、尺寸、颜色等属性。

  3. LazyForEach：与普通ForEach不同，LazyForEach是一个惰性迭代方法，它只在需要迭代数据时才进行计算。这使得LazyForEach在处理大型数据集时更加高效，可以减少渲染时间和资源占用。

通过这些关键组件，ArkTS语言可以实现灵活、高效的渲染控制，帮助开发人员实现各种复杂的渲染效果和场景呈现。

1.if/else：条件渲染

1.1 变化规则

If/else是一种在程序中用于控制流程的结构。它包括一个if语句和一个可选的else语句。if语句表示如果条件成立，那么就执行一段代码，否则跳过该代码；else语句表示如果条件不成立，那么就执行另一段代码。这种结构允许程序根据不同的条件执行不同的操作，从而实现更灵活的程序控制。

1.2 使用场景

1.2.1 使用if进行条件渲染
  1. @Entry
  2. @Component
  3. struct ViewA {
  4.   @State count: number = 0;
  5.  
  6.   build() {
  7.     Column() {
  8.       Text(`count=${this.count}`)
  9.  
  10.       if (this.count > 0) {
  11.         Text(`count is positive`)
  12.           .fontColor(Color.Green)
  13.       }
  14.  
  15.       Button('increase count')
  16.         .onClick(() => {
  17.           this.count++;
  18.         })
  19.       Button('decrease count')
  20.         .onClick(() => {
  21.           this.count--;
  22.         })
  23.     }
  24.   }
  25. }
1.2.2 使用if/else进行条件渲染
  1. @Component
  2. struct CounterView {
  3.   @Link counter: number;
  4.   label: string = 'unknown';
  5.  
  6.   build() {
  7.     Row() {
  8.       Text(`${this.label}`)
  9.       Button(`counter ${this.counter} +1`)
  10.         .onClick(() => {
  11.           this.counter += 1;
  12.         })
  13.     }
  14.   }
  15. }
  16. @Entry
  17. @Component
  18. struct MainView {
  19.   @State toggle: boolean = true;
  20.   @State counter: number = 0;
  21.   build() {
  22.     Column() {
  23.       if (this.toggle) {
  24.         CounterView({ counter: $counter, label: 'CounterView #positive' })
  25.       } else {
  26.         CounterView({ counter: $counter, label: 'CounterView #negative' })
  27.       }
  28.       Button(`toggle ${this.toggle}`)
  29.         .onClick(() => {
  30.           this.toggle = !this.toggle;
  31.         })
  32.     }
  33.   }
  34. }
1.2.3 嵌套if语句
  1. @Entry
  2. @Component
  3. struct CompA {
  4.   @State toggle: boolean = false;
  5.   @State toggleColor: boolean = false;
  6.  
  7.   build() {
  8.     Column() {
  9.       Text('Before')
  10.         .fontSize(15)
  11.       if (this.toggle) {
  12.         Text('Top True, positive 1 top')
  13.           .backgroundColor('#aaffaa').fontSize(20)
  14.         // 内部if语句
  15.         if (this.toggleColor) {
  16.           Text('Top True, Nested True, positive COLOR  Nested ')
  17.             .backgroundColor('#00aaaa').fontSize(15)
  18.         } else {
  19.           Text('Top True, Nested False, Negative COLOR  Nested ')
  20.             .backgroundColor('#aaaaff').fontSize(15)
  21.         }
  22.       } else {
  23.         Text('Top false, negative top level').fontSize(20)
  24.           .backgroundColor('#ffaaaa')
  25.         if (this.toggleColor) {
  26.           Text('positive COLOR  Nested ')
  27.             .backgroundColor('#00aaaa').fontSize(15)
  28.         } else {
  29.           Text('Negative COLOR  Nested ')
  30.             .backgroundColor('#aaaaff').fontSize(15)
  31.         }
  32.       }
  33.       Text('After')
  34.         .fontSize(15)
  35.       Button('Toggle Outer')
  36.         .onClick(() => {
  37.           this.toggle = !this.toggle;
  38.         })
  39.       Button('Toggle Inner')
  40.         .onClick(() => {
  41.           this.toggleColor = !this.toggleColor;
  42.         })
  43.     }
  44.   }
  45. }

2.ForEach：循环渲染

2.1 变化规则

ForEach是一个数组方法，用于执行一些操作，例如对数组中的每个元素执行一些代码，或者将每个元素转换为新的数组。它可以接收一个回调函数作为参数，该函数将在数组的每个元素上执行一次。在每次调用回调函数时，都会向其传递当前元素的值、索引和整个数组。该方法不会更改原始数组，而是返回一个新的、由回调函数返回的数组。

ForEach接口描述：

  1. ForEach(
  2.   arr: Array,
  3.   itemGenerator: (item: Array, index?: number) => void,
  4.   keyGenerator?: (item: Array, index?: number): string => string
  5. )

注意点keyGenerator为键值生成函数，可以达到去重的效果：
在这里插入图片描述

  1. @Entry
  2. @Component
  3. struct Parent {
  4.   @State simpleList: Array<string> = ['one', 'two', 'two', 'three'];
  5.  
  6.   build() {
  7.     Row() {
  8.       Column() {
  9.         ForEach(this.simpleList, (item: string) => {
  10.           ChildItem({ item: item })
  11.         }, (item: string) => item)
  12.       }
  13.       .width('100%')
  14.       .height('100%')
  15.     }
  16.     .height('100%')
  17.     .backgroundColor(0xF1F3F5)
  18.   }
  19. }
  20. @Component
  21. struct ChildItem {
  22.   @Prop item: string;
  23.   build() {
  24.     Text(this.item)
  25.       .fontSize(50)
  26.   }
  27. }

执行结果
在这里插入图片描述

2.2 使用场景

2.2.1 数据源不变
  1. @Entry
  2. @Component
  3. struct ArticleList {
  4.   @State simpleList: Array<number> = [1, 2, 3, 4, 5];
  5.  
  6.   build() {
  7.     Column() {
  8.       ForEach(this.simpleList, (item: string) => {
  9.         ArticleSkeletonView()
  10.           .margin({ top: 20 })
  11.       }, (item: string) => item)
  12.     }
  13.     .padding(20)
  14.     .width('100%')
  15.     .height('100%')
  16.   }
  17. }
  18. @Builder
  19. function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
  20.   Row()
  21.     .width(width)
  22.     .height(height)
  23.     .backgroundColor('#FFF2F3F4')
  24. }
  25. @Component
  26. struct ArticleSkeletonView {
  27.   build() {
  28.     Row() {
  29.       Column() {
  30.         textArea(80, 80)
  31.       }
  32.       .margin({ right: 20 })
  33.       Column() {
  34.         textArea('60%', 20)
  35.         textArea('50%', 20)
  36.       }
  37.       .alignItems(HorizontalAlign.Start)
  38.       .justifyContent(FlexAlign.SpaceAround)
  39.       .height('100%')
  40.     }
  41.     .padding(20)
  42.     .borderRadius(12)
  43.     .backgroundColor('#FFECECEC')
  44.     .height(120)
  45.     .width('100%')
  46.     .justifyContent(FlexAlign.SpaceBetween)
  47.   }
  48. }

执行效果：
在这里插入图片描述

2.2.2 数据源数组项发生变化
  1. @Entry
  2. @Component
  3. struct ArticleListView {
  4.   @State isListReachEnd: boolean = false;
  5.   @State articleList: Array<Article> = [
  6.     new Article('001', '第1篇文章', '文章简介内容'),
  7.     new Article('002', '第2篇文章', '文章简介内容'),
  8.     new Article('003', '第3篇文章', '文章简介内容'),
  9.     new Article('004', '第4篇文章', '文章简介内容'),
  10.     new Article('005', '第5篇文章', '文章简介内容'),
  11.     new Article('006', '第6篇文章', '文章简介内容')
  12.   ]
  13.  
  14.   loadMoreArticles() {
  15.     this.articleList.push(new Article('007', '加载的新文章', '文章简介内容'));
  16.   }
  17.  
  18.   build() {
  19.     Column({ space: 5 }) {
  20.       List() {
  21.         ForEach(this.articleList, (item: Article) => {
  22.           ListItem() {
  23.             ArticleCard({ article: item })
  24.               .margin({ top: 20 })
  25.           }
  26.         }, (item: Article) => item.id)
  27.       }
  28.       .onReachEnd(() => {
  29.         this.isListReachEnd = true;
  30.       })
  31.       .parallelGesture(
  32.         PanGesture({ direction: PanDirection.Up, distance: 80 })
  33.           .onActionStart(() => {
  34.             if (this.isListReachEnd) {
  35.               this.loadMoreArticles();
  36.               this.isListReachEnd = false;
  37.             }
  38.           })
  39.       )
  40.       .padding(20)
  41.       .scrollBar(BarState.Off)
  42.     }
  43.     .width('100%')
  44.     .height('100%')
  45.     .backgroundColor(0xF1F3F5)
  46.   }
  47. }
  48. @Component
  49. struct ArticleCard {
  50.   @Prop article: Article;
  51.   build() {
  52.     Row() {
  53.       Image($r('app.media.icon'))
  54.         .width(80)
  55.         .height(80)
  56.         .margin({ right: 20 })
  57.       Column() {
  58.         Text(this.article.title)
  59.           .fontSize(20)
  60.           .margin({ bottom: 8 })
  61.         Text(this.article.brief)
  62.           .fontSize(16)
  63.           .fontColor(Color.Gray)
  64.           .margin({ bottom: 8 })
  65.       }
  66.       .alignItems(HorizontalAlign.Start)
  67.       .width('80%')
  68.       .height('100%')
  69.     }
  70.     .padding(20)
  71.     .borderRadius(12)
  72.     .backgroundColor('#FFECECEC')
  73.     .height(120)
  74.     .width('100%')
  75.     .justifyContent(FlexAlign.SpaceBetween)
  76.   }
  77. }

当列表滚动到底部时，如果手势滑动距离超过指定的80，将触发loadMoreArticle()函数。此函数会在articleList数据源的尾部添加一个新的数据项，从而增加数据源的长度。

执行效果：
在这里插入图片描述

2.2.3 数据源数组项子属性变化
  1. @Entry
  2. @Component
  3. struct ArticleListView {
  4.   @State articleList: Array<Article> = [
  5.     new Article('001', '第0篇文章', '文章简介内容', false, 100),
  6.     new Article('002', '第1篇文章', '文章简介内容', false, 100),
  7.     new Article('003', '第2篇文章', '文章简介内容', false, 100),
  8.     new Article('004', '第4篇文章', '文章简介内容', false, 100),
  9.     new Article('005', '第5篇文章', '文章简介内容', false, 100),
  10.     new Article('006', '第6篇文章', '文章简介内容', false, 100),
  11.   ];
  12.  
  13.   build() {
  14.     List() {
  15.       ForEach(this.articleList, (item: Article) => {
  16.         ListItem() {
  17.           ArticleCard({
  18.             article: item
  19.           })
  20.             .margin({ top: 20 })
  21.         }
  22.       }, (item: Article) => item.id)
  23.     }
  24.     .padding(20)
  25.     .scrollBar(BarState.Off)
  26.     .backgroundColor(0xF1F3F5)
  27.   }
  28. }
  29. @Component
  30. struct ArticleCard {
  31.   @ObjectLink article: Article;
  32.   handleLiked() {
  33.     this.article.isLiked = !this.article.isLiked;
  34.     this.article.likesCount = this.article.isLiked ? this.article.likesCount + 1 : this.article.likesCount - 1;
  35.   }
  36.   build() {
  37.     Row() {
  38.       Image($r('app.media.icon'))
  39.         .width(80)
  40.         .height(80)
  41.         .margin({ right: 20 })
  42.       Column() {
  43.         Text(this.article.title)
  44.           .fontSize(20)
  45.           .margin({ bottom: 8 })
  46.         Text(this.article.brief)
  47.           .fontSize(16)
  48.           .fontColor(Color.Gray)
  49.           .margin({ bottom: 8 })
  50.         Row() {
  51.           Image(this.article.isLiked ? $r('app.media.iconLiked') : $r('app.media.iconUnLiked'))
  52.             .width(24)
  53.             .height(24)
  54.             .margin({ right: 8 })
  55.           Text(this.article.likesCount.toString())
  56.             .fontSize(16)
  57.         }
  58.         .onClick(() => this.handleLiked())
  59.         .justifyContent(FlexAlign.Center)
  60.       }
  61.       .alignItems(HorizontalAlign.Start)
  62.       .width('80%')
  63.       .height('100%')
  64.     }
  65.     .padding(20)
  66.     .borderRadius(12)
  67.     .backgroundColor('#FFECECEC')
  68.     .height(120)
  69.     .width('100%')
  70.     .justifyContent(FlexAlign.SpaceBetween)
  71.   }
  72. }

执行结果：
在这里插入图片描述
== 注意：开发者在使用ForEach时应特别重视keyGenerator为键值生成函数，会根据键值生成函数确定替换的值。==

3.LazyForEach：数据懒加载

3.1 变化规则

LazyForEach是一种延迟执行的迭代方法，它可以帮助我们更高效地遍历和操作数组。与常规的ForEach方法不同，LazyForEach方法不会立即执行回调函数，而是在需要访问数组元素时才将回调函数应用于该元素。这种延迟执行的方式可以大大减少不必要的计算，提高代码性能。LazyForEach在处理大型数组或频繁进行迭代时特别有用。

LazyForEach接口描述：

  1. LazyForEach(
  2.     dataSource: IDataSource,             // 需要进行数据迭代的数据源
  3.     itemGenerator: (item: any, index?: number) => void,  // 子组件生成函数
  4.     keyGenerator?: (item: any, index?: number) => string // 键值生成函数
  5. ): void

IDataSource接口描述：

  1. interface IDataSource {
  2.     totalCount(): number; // 获得数据总数
  3.     getData(index: number): Object; // 获取索引值对应的数据
  4.     registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器
  5.     unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器
  6. }

DataChangeListener接口描述：

  1. interface DataChangeListener {
  2.     onDataReloaded(): void; // 重新加载数据时调用
  3.     onDataAdded(index: number): void; // 添加数据时调用
  4.     onDataMoved(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用
  5.     onDataDeleted(index: number): void; // 删除数据时调用
  6.     onDataChanged(index: number): void; // 改变数据时调用
  7.     onDataAdd(index: number): void; // 添加数据时调用
  8.     onDataMove(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用
  9.     onDataDelete(index: number): void; // 删除数据时调用
  10.     onDataChange(index: number): void; // 改变数据时调用
  11. }

3.2 使用场景

3.2.1 首次渲染
3.2.1.1 生成不同键值

1、正常渲染

  1. // Basic implementation of IDataSource to handle data listener
  2. class BasicDataSource implements IDataSource {
  3.   private listeners: DataChangeListener[] = [];
  4.   private originDataArray: string[] = [];
  5.  
  6.   public totalCount(): number {
  7.     return 0;
  8.   }
  9.  
  10.   public getData(index: number): string {
  11.     return this.originDataArray[index];
  12.   }
  13.  
  14.   // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听
  15.   registerDataChangeListener(listener: DataChangeListener): void {
  16.     if (this.listeners.indexOf(listener) < 0) {
  17.       console.info('add listener');
  18.       this.listeners.push(listener);
  19.     }
  20.   }
  21.  
  22.   // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
  23.   unregisterDataChangeListener(listener: DataChangeListener): void {
  24.     const pos = this.listeners.indexOf(listener);
  25.     if (pos >= 0) {
  26.       console.info('remove listener');
  27.       this.listeners.splice(pos, 1);
  28.     }
  29.   }
  30.  
  31.   // 通知LazyForEach组件需要重载所有子组件
  32.   notifyDataReload(): void {
  33.     this.listeners.forEach(listener => {
  34.       listener.onDataReloaded();
  35.     })
  36.   }
  37.  
  38.   // 通知LazyForEach组件需要在index对应索引处添加子组件
  39.   notifyDataAdd(index: number): void {
  40.     this.listeners.forEach(listener => {
  41.       listener.onDataAdd(index);
  42.     })
  43.   }
  44.  
  45.   // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件
  46.   notifyDataChange(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataChange(index);
  49.     })
  50.   }
  51.  
  52.   // 通知LazyForEach组件需要在index对应索引处删除该子组件
  53.   notifyDataDelete(index: number): void {
  54.     this.listeners.forEach(listener => {
  55.       listener.onDataDelete(index);
  56.     })
  57.   }
  58. }
  59.  
  60. class MyDataSource extends BasicDataSource {
  61.   private dataArray: string[] = [];
  62.  
  63.   public totalCount(): number {
  64.     return this.dataArray.length;
  65.   }
  66.  
  67.   public getData(index: number): string {
  68.     return this.dataArray[index];
  69.   }
  70.  
  71.   public addData(index: number, data: string): void {
  72.     this.dataArray.splice(index, 0, data);
  73.     this.notifyDataAdd(index);
  74.   }
  75.  
  76.   public pushData(data: string): void {
  77.     this.dataArray.push(data);
  78.     this.notifyDataAdd(this.dataArray.length - 1);
  79.   }
  80. }
  81.  
  82. @Entry
  83. @Component
  84. struct MyComponent {
  85.   private data: MyDataSource = new MyDataSource();
  86.    
  87.   aboutToAppear() {
  88.     for (let i = 0; i <= 20; i++) {
  89.       this.data.pushData(`Hello ${i}`)
  90.     }
  91.   }
  92.  
  93.   build() {
  94.     List({ space: 3 }) {
  95.       LazyForEach(this.data, (item: string) => {
  96.         ListItem() {
  97.           Row() {
  98.             Text(item).fontSize(50)
  99.               .onAppear(() => {
  100.                 console.info("appear:" + item)
  101.               })
  102.           }.margin({ left: 10, right: 10 })
  103.         }
  104.       }, (item: string) => item)
  105.     }.cachedCount(5)
  106.   }
  107. }

2、键值相同时错误渲染

  1. class BasicDataSource implements IDataSource {
  2.  private listeners: DataChangeListener[] = [];
  3.  private originDataArray: string[] = [];
  4.  
  5.  public totalCount(): number {
  6.    return 0;
  7.  }
  8.  
  9.  public getData(index: number): string {
  10.    return this.originDataArray[index];
  11.  }
  12.  
  13.  registerDataChangeListener(listener: DataChangeListener): void {
  14.    if (this.listeners.indexOf(listener) < 0) {
  15.      console.info('add listener');
  16.      this.listeners.push(listener);
  17.    }
  18.  }
  19.  
  20.  unregisterDataChangeListener(listener: DataChangeListener): void {
  21.    const pos = this.listeners.indexOf(listener);
  22.    if (pos >= 0) {
  23.      console.info('remove listener');
  24.      this.listeners.splice(pos, 1);
  25.    }
  26.  }
  27.  
  28.  notifyDataReload(): void {
  29.    this.listeners.forEach(listener => {
  30.      listener.onDataReloaded();
  31.    })
  32.  }
  33.  
  34.  notifyDataAdd(index: number): void {
  35.    this.listeners.forEach(listener => {
  36.      listener.onDataAdd(index);
  37.    })
  38.  }
  39.  
  40.  notifyDataChange(index: number): void {
  41.    this.listeners.forEach(listener => {
  42.      listener.onDataChange(index);
  43.    })
  44.  }
  45.  
  46.  notifyDataDelete(index: number): void {
  47.    this.listeners.forEach(listener => {
  48.      listener.onDataDelete(index);
  49.    })
  50.  }
  51. }
  52.  
  53. class MyDataSource extends BasicDataSource {
  54.  private dataArray: string[] = [];
  55.  
  56.  public totalCount(): number {
  57.    return this.dataArray.length;
  58.  }
  59.  
  60.  public getData(index: number): string {
  61.    return this.dataArray[index];
  62.  }
  63.  
  64.  public addData(index: number, data: string): void {
  65.    this.dataArray.splice(index, 0, data);
  66.    this.notifyDataAdd(index);
  67.  }
  68.  
  69.  public pushData(data: string): void {
  70.    this.dataArray.push(data);
  71.    this.notifyDataAdd(this.dataArray.length - 1);
  72.  }
  73. }
  74.  
  75. @Entry
  76. @Component
  77. struct MyComponent {
  78.  private data: MyDataSource = new MyDataSource();
  79.  
  80.  aboutToAppear() {
  81.    for (let i = 0; i <= 20; i++) {
  82.      this.data.pushData(`Hello ${i}`)
  83.    }
  84.  }
  85.  
  86.  build() {
  87.    List({ space: 3 }) {
  88.      LazyForEach(this.data, (item: string) => {
  89.        ListItem() {
  90.          Row() {
  91.            Text(item).fontSize(50)
  92.              .onAppear(() => {
  93.                console.info("appear:" + item)
  94.              })
  95.          }.margin({ left: 10, right: 10 })
  96.        }
  97.      }, (item: string) => 'same key')
  98.    }.cachedCount(5)
  99.  }
  100. }
3.2.2 非首次渲染
3.2.2.1 添加数据
  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: string[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): string {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51. }
  52.  
  53. class MyDataSource extends BasicDataSource {
  54.   private dataArray: string[] = [];
  55.  
  56.   public totalCount(): number {
  57.     return this.dataArray.length;
  58.   }
  59.  
  60.   public getData(index: number): string {
  61.     return this.dataArray[index];
  62.   }
  63.  
  64.   public addData(index: number, data: string): void {
  65.     this.dataArray.splice(index, 0, data);
  66.     this.notifyDataAdd(index);
  67.   }
  68.  
  69.   public pushData(data: string): void {
  70.     this.dataArray.push(data);
  71.     this.notifyDataAdd(this.dataArray.length - 1);
  72.   }
  73. }
  74.  
  75. @Entry
  76. @Component
  77. struct MyComponent {
  78.   private data: MyDataSource = new MyDataSource();
  79.  
  80.   aboutToAppear() {
  81.     for (let i = 0; i <= 20; i++) {
  82.       this.data.pushData(`Hello ${i}`)
  83.     }
  84.   }
  85.  
  86.   build() {
  87.     List({ space: 3 }) {
  88.       LazyForEach(this.data, (item: string) => {
  89.         ListItem() {
  90.           Row() {
  91.             Text(item).fontSize(50)
  92.               .onAppear(() => {
  93.                 console.info("appear:" + item)
  94.               })
  95.           }.margin({ left: 10, right: 10 })
  96.         }
  97.         .onClick(() => {
  98.           // 点击追加子组件
  99.           this.data.pushData(`Hello ${this.data.totalCount()}`);
  100.         })
  101.       }, (item: string) => item)
  102.     }.cachedCount(5)
  103.   }
  104. }
3.2.2.2 删除数据
  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: string[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): string {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51. }
  52.  
  53. class MyDataSource extends BasicDataSource {
  54.   dataArray: string[] = [];
  55.  
  56.   public totalCount(): number {
  57.     return this.dataArray.length;
  58.   }
  59.  
  60.   public getData(index: number): string {
  61.     return this.dataArray[index];
  62.   }
  63.  
  64.   public addData(index: number, data: string): void {
  65.     this.dataArray.splice(index, 0, data);
  66.     this.notifyDataAdd(index);
  67.   }
  68.  
  69.   public pushData(data: string): void {
  70.     this.dataArray.push(data);
  71.     this.notifyDataAdd(this.dataArray.length - 1);
  72.   }
  73.   
  74.   public deleteData(index: number): void {
  75.     this.dataArray.splice(index, 1);
  76.     this.notifyDataDelete(index);
  77.   }
  78. }
  79.  
  80. @Entry
  81. @Component
  82. struct MyComponent {
  83.   private data: MyDataSource = new MyDataSource();
  84.  
  85.   aboutToAppear() {
  86.     for (let i = 0; i <= 20; i++) {
  87.       this.data.pushData(`Hello ${i}`)
  88.     }
  89.   }
  90.  
  91.   build() {
  92.     List({ space: 3 }) {
  93.       LazyForEach(this.data, (item: string, index: number) => {
  94.         ListItem() {
  95.           Row() {
  96.             Text(item).fontSize(50)
  97.               .onAppear(() => {
  98.                 console.info("appear:" + item)
  99.               })
  100.           }.margin({ left: 10, right: 10 })
  101.         }
  102.         .onClick(() => {
  103.           // 点击删除子组件
  104.           this.data.deleteData(this.data.dataArray.indexOf(item));
  105.         })
  106.       }, (item: string) => item)
  107.     }.cachedCount(5)
  108.   }
  109. }
3.2.2.3 改变单个数据
  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: string[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): string {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51. }
  52.  
  53. class MyDataSource extends BasicDataSource {
  54.   private dataArray: string[] = [];
  55.  
  56.   public totalCount(): number {
  57.     return this.dataArray.length;
  58.   }
  59.  
  60.   public getData(index: number): string {
  61.     return this.dataArray[index];
  62.   }
  63.  
  64.   public addData(index: number, data: string): void {
  65.     this.dataArray.splice(index, 0, data);
  66.     this.notifyDataAdd(index);
  67.   }
  68.  
  69.   public pushData(data: string): void {
  70.     this.dataArray.push(data);
  71.     this.notifyDataAdd(this.dataArray.length - 1);
  72.   }
  73.   
  74.   public deleteData(index: number): void {
  75.     this.dataArray.splice(index, 1);
  76.     this.notifyDataDelete(index);
  77.   }
  78.   
  79.   public changeData(index: number, data: string): void {
  80.     this.dataArray.splice(index, 0, data);
  81.     this.notifyDataChange(index);
  82.   }
  83. }
  84.  
  85. @Entry
  86. @Component
  87. struct MyComponent {
  88.   private moved: number[] = [];
  89.   private data: MyDataSource = new MyDataSource();
  90.  
  91.   aboutToAppear() {
  92.     for (let i = 0; i <= 20; i++) {
  93.       this.data.pushData(`Hello ${i}`)
  94.     }
  95.   }
  96.   build() {
  97.     List({ space: 3 }) {
  98.       LazyForEach(this.data, (item: string, index: number) => {
  99.         ListItem() {
  100.           Row() {
  101.             Text(item).fontSize(50)
  102.               .onAppear(() => {
  103.                 console.info("appear:" + item)
  104.               })
  105.           }.margin({ left: 10, right: 10 })
  106.         }
  107.         .onClick(() => {
  108.           this.data.changeData(index, item + '00');
  109.         })
  110.       }, (item: string) => item)
  111.     }.cachedCount(5)
  112.   }
  113. }
3.2.2.4 改变多个数据
  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: string[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): string {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51. }
  52.  
  53. class MyDataSource extends BasicDataSource {
  54.   private dataArray: string[] = [];
  55.  
  56.   public totalCount(): number {
  57.     return this.dataArray.length;
  58.   }
  59.  
  60.   public getData(index: number): string {
  61.     return this.dataArray[index];
  62.   }
  63.  
  64.   public addData(index: number, data: string): void {
  65.     this.dataArray.splice(index, 0, data);
  66.     this.notifyDataAdd(index);
  67.   }
  68.  
  69.   public pushData(data: string): void {
  70.     this.dataArray.push(data);
  71.     this.notifyDataAdd(this.dataArray.length - 1);
  72.   }
  73.   
  74.   public deleteData(index: number): void {
  75.     this.dataArray.splice(index, 1);
  76.     this.notifyDataDelete(index);
  77.   }
  78.   
  79.   public changeData(index: number): void {
  80.     this.notifyDataChange(index);
  81.   }
  82.     
  83.   public reloadData(): void {
  84.     this.notifyDataReload();
  85.   }
  86.     
  87.   public modifyAllData(): void {
  88.     this.dataArray = this.dataArray.map((item: string) => {
  89.         return item + '0';
  90.     })
  91.   }
  92. }
  93.  
  94. @Entry
  95. @Component
  96. struct MyComponent {
  97.   private moved: number[] = [];
  98.   private data: MyDataSource = new MyDataSource();
  99.  
  100.   aboutToAppear() {
  101.     for (let i = 0; i <= 20; i++) {
  102.       this.data.pushData(`Hello ${i}`)
  103.     }
  104.   }
  105.  
  106.   build() {
  107.     List({ space: 3 }) {
  108.       LazyForEach(this.data, (item: string, index: number) => {
  109.         ListItem() {
  110.           Row() {
  111.             Text(item).fontSize(50)
  112.               .onAppear(() => {
  113.                 console.info("appear:" + item)
  114.               })
  115.           }.margin({ left: 10, right: 10 })
  116.         }
  117.         .onClick(() => {
  118.           this.data.modifyAllData();
  119.           this.data.reloadData();
  120.         })
  121.       }, (item: string) => item)
  122.     }.cachedCount(5)
  123.   }
  124. }
3.2.2.5 改变数据子属性
  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: StringData[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): StringData {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51. }
  52.  
  53. class MyDataSource extends BasicDataSource {
  54.   private dataArray: StringData[] = [];
  55.  
  56.   public totalCount(): number {
  57.     return this.dataArray.length;
  58.   }
  59.  
  60.   public getData(index: number): StringData {
  61.     return this.dataArray[index];
  62.   }
  63.  
  64.   public addData(index: number, data: StringData): void {
  65.     this.dataArray.splice(index, 0, data);
  66.     this.notifyDataAdd(index);
  67.   }
  68.  
  69.   public pushData(data: StringData): void {
  70.     this.dataArray.push(data);
  71.     this.notifyDataAdd(this.dataArray.length - 1);
  72.   }
  73. }
  74.  
  75. @Observed
  76. class StringData {
  77.   message: string;
  78.   constructor(message: string) {
  79.     this.message = message;
  80.   }  
  81. }
  82.  
  83. @Entry
  84. @Component
  85. struct MyComponent {
  86.   private moved: number[] = [];
  87.   @State data: MyDataSource = new MyDataSource();
  88.  
  89.   aboutToAppear() {
  90.     for (let i = 0; i <= 20; i++) {
  91.       this.data.pushData(new StringData(`Hello ${i}`));
  92.     }
  93.   }
  94.  
  95.   build() {
  96.     List({ space: 3 }) {
  97.       LazyForEach(this.data, (item: StringData, index: number) => {
  98.         ListItem() {
  99.           ChildComponent({data: item})
  100.         }
  101.         .onClick(() => {
  102.           item.message += '0';
  103.         })
  104.       }, (item: StringData, index: number) => index.toString())
  105.     }.cachedCount(5)
  106.   }
  107. }
  108. @Component
  109. struct ChildComponent {
  110.   @ObjectLink data: StringData
  111.   build() {
  112.     Row() {
  113.       Text(this.data.message).fontSize(50)
  114.         .onAppear(() => {
  115.           console.info("appear:" + this.data.message)
  116.         })
  117.     }.margin({ left: 10, right: 10 })
  118.   }
  119. }
3.2.3 问题点
3.2.3.1 索引重置
  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: string[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): string {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51. }
  52.  
  53. class MyDataSource extends BasicDataSource {
  54.   private dataArray: string[] = [];
  55.  
  56.   public totalCount(): number {
  57.     return this.dataArray.length;
  58.   }
  59.  
  60.   public getData(index: number): string {
  61.     return this.dataArray[index];
  62.   }
  63.  
  64.   public addData(index: number, data: string): void {
  65.     this.dataArray.splice(index, 0, data);
  66.     this.notifyDataAdd(index);
  67.   }
  68.  
  69.   public pushData(data: string): void {
  70.     this.dataArray.push(data);
  71.     this.notifyDataAdd(this.dataArray.length - 1);
  72.   }
  73.   
  74.   public deleteData(index: number): void {
  75.     this.dataArray.splice(index, 1);
  76.     this.notifyDataDelete(index);
  77.   }
  78.     
  79.   public reloadData(): void {
  80.     this.notifyDataReload();
  81.   }
  82. }
  83.  
  84. @Entry
  85. @Component
  86. struct MyComponent {
  87.   private data: MyDataSource = new MyDataSource();
  88.  
  89.   aboutToAppear() {
  90.     for (let i = 0; i <= 20; i++) {
  91.       this.data.pushData(`Hello ${i}`)
  92.     }
  93.   }
  94.  
  95.   build() {
  96.     List({ space: 3 }) {
  97.       LazyForEach(this.data, (item: string, index: number) => {
  98.         ListItem() {
  99.           Row() {
  100.             Text(item).fontSize(50)
  101.               .onAppear(() => {
  102.                 console.info("appear:" + item)
  103.               })
  104.           }.margin({ left: 10, right: 10 })
  105.         }
  106.         .onClick(() => {
  107.           // 点击删除子组件
  108.           this.data.deleteData(index);
  109.           // 重置所有子组件的index索引
  110.           this.data.reloadData();
  111.         })
  112.       }, (item: string, index: number) => item + index.toString())
  113.     }.cachedCount(5)
  114.   }
  115. }
3.2.3.2 图片闪烁
  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: StringData[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): StringData {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51. }
  52.  
  53. class MyDataSource extends BasicDataSource {
  54.   private dataArray: StringData[] = [];
  55.  
  56.   public totalCount(): number {
  57.     return this.dataArray.length;
  58.   }
  59.  
  60.   public getData(index: number): StringData {
  61.     return this.dataArray[index];
  62.   }
  63.  
  64.   public addData(index: number, data: StringData): void {
  65.     this.dataArray.splice(index, 0, data);
  66.     this.notifyDataAdd(index);
  67.   }
  68.  
  69.   public pushData(data: StringData): void {
  70.     this.dataArray.push(data);
  71.     this.notifyDataAdd(this.dataArray.length - 1);
  72.   }
  73. }
  74.  
  75. @Observed
  76. class StringData {
  77.   message: string;
  78.   imgSrc: Resource;
  79.   constructor(message: string, imgSrc: Resource) {
  80.     this.message = message;
  81.       this.imgSrc = imgSrc;
  82.   }  
  83. }
  84.  
  85. @Entry
  86. @Component
  87. struct MyComponent {
  88.   @State data: MyDataSource = new MyDataSource();
  89.  
  90.   aboutToAppear() {
  91.     for (let i = 0; i <= 20; i++) {
  92.       this.data.pushData(new StringData(`Hello ${i}`, $r('app.media.img')));
  93.     }
  94.   }
  95.  
  96.   build() {
  97.     List({ space: 3 }) {
  98.       LazyForEach(this.data, (item: StringData, index: number) => {
  99.         ListItem() {
  100.           ChildComponent({data: item})
  101.         }
  102.         .onClick(() => {
  103.           item.message += '0';
  104.         })
  105.       }, (item: StringData, index: number) => index.toString())
  106.     }.cachedCount(5)
  107.   }
  108. }
  109. @Component
  110. struct ChildComponent {
  111.   @ObjectLink data: StringData
  112.   build() {
  113.     Column() {
  114.       Text(this.data.message).fontSize(50)
  115.         .onAppear(() => {
  116.           console.info("appear:" + this.data.message)
  117.         })
  118.       Image(this.data.imgSrc)
  119.         .width(500)
  120.         .height(200)
  121.     }.margin({ left: 10, right: 10 })
  122.   }
  123. }
3.2.3.3 ObjectLink属性变化后UI更新
  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: StringData[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): StringData {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51. }
  52.  
  53. class MyDataSource extends BasicDataSource {
  54.   private dataArray: StringData[] = [];
  55.  
  56.   public totalCount(): number {
  57.     return this.dataArray.length;
  58.   }
  59.  
  60.   public getData(index: number): StringData {
  61.     return this.dataArray[index];
  62.   }
  63.  
  64.   public addData(index: number, data: StringData): void {
  65.     this.dataArray.splice(index, 0, data);
  66.     this.notifyDataAdd(index);
  67.   }
  68.  
  69.   public pushData(data: StringData): void {
  70.     this.dataArray.push(data);
  71.     this.notifyDataAdd(this.dataArray.length - 1);
  72.   }
  73. }
  74.  
  75. @Observed
  76. class StringData {
  77.   message: NestedString;
  78.   constructor(message: NestedString) {
  79.     this.message = message;
  80.   }  
  81. }
  82.  
  83. @Observed
  84. class NestedString {
  85.   message: string;
  86.   constructor(message: string) {
  87.     this.message = message;
  88.   }  
  89. }
  90.  
  91. @Entry
  92. @Component
  93. struct MyComponent {
  94.   private moved: number[] = [];
  95.   @State data: MyDataSource = new MyDataSource();
  96.  
  97.   aboutToAppear() {
  98.     for (let i = 0; i <= 20; i++) {
  99.       this.data.pushData(new StringData(new NestedString(`Hello ${i}`)));
  100.     }
  101.   }
  102.  
  103.   build() {
  104.     List({ space: 3 }) {
  105.       LazyForEach(this.data, (item: StringData, index: number) => {
  106.         ListItem() {
  107.           ChildComponent({data: item})
  108.         }
  109.         .onClick(() => {
  110.           item.message = new NestedString(item.message.message + '0');
  111.         })
  112.       }, (item: StringData, index: number) => item.toString() + index.toString())
  113.     }.cachedCount(5)
  114.   }
  115. }
  116. @Component
  117. struct ChildComponent {
  118.   @ObjectLink data: StringData
  119.   build() {
  120.     Row() {
  121.       Text(this.data.message.message).fontSize(50)
  122.         .onAppear(() => {
  123.           console.info("appear:" + this.data.message.message)
  124.         })
  125.     }.margin({ left: 10, right: 10 })
  126.   }
  127. }

 声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】

推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。