HarmonyOS 鸿蒙Next LazyForEach 添加删除与添加动画后，删除会导致整个列表闪烁

HarmonyOS 鸿蒙Next LazyForEach 添加删除与添加动画后，删除会导致整个列表闪烁

数据源按照官方示例的。 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-lazyforeach-V5#%E6%B8%B2%E6%9F%93%E7%BB%93%E6%9E%9C%E9%9D%9E%E9%A2%84%E6%9C%9F

List代码。

List({ space: 20, initialIndex: this.data.totalCount() - 1, scroller: this.scrollerForList }) {
    LazyForEach(this.data, (item: string) => {
        ListItem() {
            Text('' + item)
                .fontSize(16)
                .textAlign(TextAlign.Center)
        }
        .backgroundColor($r('sys.color.white'))
        .height('100%')
        .aspectRatio(1)
        .borderRadius(10)
        .onAreaChange((oldValue, newValue) => {
            LogUtil.debug(`ListItem oldValue ${oldValue.height} newValue ${newValue.height} `)
        })
        .transition(TransitionEffect.asymmetric(
            TransitionEffect.scale({ x: 0, y: 0 }).animation({ duration: 300 }).combine(
                TransitionEffect.opacity(0).animation({ duration: 300 })),
            TransitionEffect.scale({ x: 1, y: 1 }).animation({ duration: 300 }).combine(
                TransitionEffect.opacity(1).animation({ duration: 300 }))
        ))
    }, (item: number) => JSON.stringify(item))
}
// 启用链式联动效果
.chainAnimation(false)
.edgeEffect(EdgeEffect.Spring)
.listDirection(Axis.Horizontal)
.height('100%')
.width('auto')
.scrollSnapAlign(ScrollSnapAlign.NONE)
.scrollBar(BarState.Off)
.cachedCount(5)

更多关于HarmonyOS 鸿蒙Next LazyForEach 添加删除与添加动画后，删除会导致整个列表闪烁的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

建议把LazyForEach(this.data, (item: string)改成LazyForEach(this.data, (item: string, index: number)

把(item: number) => JSON.stringify(item) 换成（item:string,index:number）=> item + index.tostring()

之后试试

更多关于HarmonyOS 鸿蒙Next LazyForEach 添加删除与添加动画后，删除会导致整个列表闪烁的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


还是一样的问题。

在HarmonyOS鸿蒙系统中，使用Next LazyForEach组件时，若添加删除与添加动画后删除项导致整个列表闪烁，可能是由于动画处理或UI刷新机制不当引起的。

这种问题通常与列表项的重新渲染有关。当列表项被删除时，如果动画处理不当或列表没有正确地复用视图，可能会导致整个列表重新绘制，从而引起闪烁。

一种可能的解决方法是优化动画处理逻辑，确保删除操作不会触发整个列表的重新布局。可以通过以下方式尝试解决：

  1. 确保动画的同步性：动画的开始和结束应与数据更新同步，避免数据变化与UI动画不同步导致的闪烁。
  2. 使用Diff算法：在数据更新时，使用Diff算法比较新旧数据，只更新变化的部分，减少不必要的重绘。
  3. 优化列表复用：确保列表项视图被正确复用，避免每次数据变化都创建新视图。

如果上述方法未能解决问题，可能是由于鸿蒙系统特定的UI渲染机制或组件行为导致。此时，建议深入检查Next LazyForEach组件的文档和示例，确认是否有已知的限制或最佳实践未被遵循。

如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部