HarmonyOS List容器删除item时,是否支持动效

在List容器中LazyForEach数据源创建ListItem,当数据源删除某个元素后,List容器会刷新重新渲染删除ListItem。需要元素删除时有动效,删除item的下面部分动效上移。

HarmonyOS
2024-12-25 13:35:59
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以使用ListItem的transition属性实现,参考示例:

@Entry
@Component
struct ListItemExample {
  @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
  private scroller: Scroller = new Scroller()
  startIndex: number = 10

  build() {
    Column() {
      List({ space: 20, scroller: this.scroller }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)

          }
          .transition({ type: TransitionType.Delete, opacity: 0 })

        }, (item: string) => item)
      }.width('90%').scrollBar(BarState.Off)


      Button('删除')
        .width(100)
        .height(100)
        .onClick(() => {

          animateTo({ duration: 500 }, () => {
            // let index = this.arr.indexOf(item)
            // this.arr.splice(index, 1)
            if (this.arr.length > 0) {
              this.arr.shift()
            }

          })
        })
    }.width('100%').height('90%').backgroundColor(0xDCDCDC).padding({ top: 5 })

  }
}
分享
微博
QQ
微信
回复
2024-12-25 17:14:59
相关问题
HarmonyOS listitem支持效果吗?
351浏览 • 1回复 待解决
HarmonyOS 是否有办法实现SVGA播放
235浏览 • 1回复 待解决
HarmonyOS 属性如何打断
177浏览 • 1回复 待解决
HarmonyOS SVGA图片加载
335浏览 • 1回复 待解决
如何设置全屏返回的
2108浏览 • 1回复 待解决
现在是否支持Webp图?
2541浏览 • 1回复 待解决
鸿蒙jsUi如何制作按钮按下
8829浏览 • 3回复 待解决
docker删除所有的容器
4736浏览 • 2回复 待解决
图除了GIF,是否支持其他格式
2217浏览 • 1回复 待解决
HarmonyOS List item 刷新问题
1041浏览 • 1回复 待解决
HarmonyOS listitem如何保存状态
432浏览 • 2回复 待解决