HarmonyOS鸿蒙Next中LazyforEach节点错乱

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS鸿蒙Next中LazyforEach节点错乱

LazyForEach(this.positionDataList, (item:TagLatLngPoint,index:number) =>{ Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){ Column(){ Flex({alignItems:ItemAlign.Start}){ Text(IL.GetMlEx(‘设备名称’).toString()+’:’).flexShrink(0) Text(this.deviceObjectList.find(device => device.idMac === item.idBak)?.name).maxLines(3).flexGrow(1) }.width(‘100%’).margin({bottom:5,top:5}) Row(){ Text(IL.GetMlEx(‘时间’).toString()+’:’) Text( formatTimestamp(item.time*1000, ‘yyyy-MM-dd hh:mm:ss’)) }.positionListItem() Row(){ Text(IL.GetMlEx(‘经纬度’).toString()+’:’) Text(item.lng.toFixed(6)+’,’+item.lat.toFixed(6)) }.positionListItem() Row(){ Text(IL.GetMlEx(‘海拔’).toString()+’:’) Text(item.iAlt+’’) }.positionListItem() Row(){ Text(IL.GetMlEx(‘速度’).toString()+’(km/h):’) Text(Math.round(item.iSpeed/1000) + ‘’) }.positionListItem() } if(this.selectPosition.findIndex(select => select.uuid === item.uuid) > -1){ Image($r(‘app.media.check’)).width(17).height(17).margin({right:12}) } }.onClick(() => { const index = this.selectPosition.findIndex(select => select.uuid === item.uuid) if( index > -1){ this.selectPosition.splice(index,1) }else{ this.selectPosition.push(item) } }) if(index < this.positionDataList.getListData().length - 1){ Divider() } },(item:TagQunHisStaGetHdr) =>item.uuid)


更多关于HarmonyOS鸿蒙Next中LazyforEach节点错乱的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这边Demo如下

@Entry
@Component
struct LazyForEachExamplePage {

  @State module: ItemData = new ItemData()

  aboutToAppear(): void {
    let index = 1
    this.module.pushData("测试" + index)
    this.module.pushData("测试" + index+1)
    this.module.pushData("测试" + index+2)
    this.module.pushData("测试" + index+3)
  }

  build() {
    Column() {
      LazyForEach(this.module, (str: string, index: number) => {
        Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Column(){
            Flex({alignItems:ItemAlign.Start}){
              Text('设备名称').flexShrink(0)
            }.width('100%').margin({bottom:5,top:5})
            Row(){
              Text(str)
            }
            if(index > 1){
              Image($r('app.media.hello')).width(17).height(17).margin({right:12})
            }
          }.onClick(()=>{
          })
          if(index < 3){
            Divider()
          }
        }
      }, (str: string) => str)
    }
    .height('100%')
    .width('100%')
  }
}

@Observed
class ItemData implements IDataSource {
  private listeners: DataChangeListener[] = []
  listData: ObservedArray<string> = []

  totalCount(): number {
    return this.listData.length
  }

  getData(index: number): string {
    return this.listData[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }

  public pushData(data: string): void {
    this.listData.push(data);
    this.notifyDataAdd(this.listData.length - 1);
  }

  public deleteData(start: number, end: number): void {
    this.listData.splice(start, end)
    if (end > 1) {
      for (let index = start; index < end; index++) {
        this.notifyDataDelete(index)
      }
    } else {
      this.notifyDataDelete(start)
    }
  }
}

@Observed
export class ObservedArray<T> extends Array<T> {
  constructor(args: T[]) {
    console.log(`ObservedArray: ${JSON.stringify(args)} `)
    if (args instanceof Array) {
      super(...args);
    } else {
      super(args)
    }
  }
}

更多关于HarmonyOS鸿蒙Next中LazyforEach节点错乱的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,LazyForEach组件用于高效渲染大量数据列表,支持懒加载机制以优化性能。如果遇到节点错乱问题,可能是由于以下原因:

  1. 数据源变更未通知:LazyForEach依赖数据源的变更通知来更新UI。如果数据源发生变化但未正确调用notifyDataChanged,可能导致渲染错乱。

  2. 唯一键(key)冲突:LazyForEach要求为每个数据项提供唯一键。如果键值重复或未正确生成,可能导致节点错乱。

  3. 异步更新问题:在异步更新数据时,如果UI更新和数据更新未正确同步,可能导致渲染不一致。

  4. 组件状态管理不当:LazyForEach内部组件状态未正确管理,可能导致重新渲染时出现错乱。

  5. 渲染顺序异常:LazyForEach的懒加载机制可能导致渲染顺序与数据顺序不一致,尤其是在快速滚动时。

解决此类问题需确保数据源变更通知正确、唯一键生成唯一且稳定、异步更新同步,以及组件状态管理合理。

在HarmonyOS鸿蒙Next中,LazyForEach节点错乱可能由以下原因导致:

  1. 数据源变动:LazyForEach依赖的数据源在渲染过程中发生变动,导致节点顺序混乱。确保数据源稳定,必要时使用@State@Observed装饰器管理状态。

  2. Key不唯一:LazyForEach需要为每个项提供唯一且稳定的key,以便正确识别和更新节点。确保key值唯一且不变。

  3. 异步更新:数据更新时未及时同步到UI,导致渲染错乱。使用@State@Link确保数据与UI同步更新。

  4. 布局问题:父容器布局约束可能与子节点渲染顺序冲突,建议检查布局逻辑。

通过以上方法排查和修复,可解决LazyForEach节点错乱问题。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!