HarmonyOS List中ListItem插入怎么加入动画

我在List中插入数据时,希望的时ListItem从下面插入往上顶的一个动画,有没有什么方案实现?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

可使用animateTo搭配transition实现,参考文档见链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-transition-animation-within-component-0000001500755277-V2#section66304713316

List的高度超过了屏幕,需要显示新插入的一条的动画,并让列表滑动到最底部,可以给list添加一个ListScroller并在animateTo回调中添加this.listScroller.scrollEdge(Edge.End),参考代码如下:

@Entry
@Component
struct ListDemo {
  @State message: number[] = [1,2,3];
  @State num:number=4
  listcontroller:ListScroller=new ListScroller()
  build() {
    Column() {
      Stack(){
        List({scroller:this.listcontroller }){
          ForEach(this.message,(item:number)=>{
            ListItem(){
              Column(){
                Text(item.toString())
                  .width('100%')
                  .height(30)
              }.width('70%')
              .border({width:1})
              .justifyContent(FlexAlign.Center)
            }.margin({bottom:5})
            // .transition({ type: TransitionType.All, translate: { y: 30 } })
            .transition(TransitionEffect.translate({ y: 30 }))
          }, (item:number) => item.toString())
        }.width('100%')
      }
      .alignContent(Alignment.BottomStart)
      .layoutWeight(1)
      Button("添加")
        .onClick(()=>{

          animateTo({
            duration: 1000,
          }, () => {
            this.message.push(this.num)
            this.num++
            this.listcontroller.scrollEdge(Edge.End)
          })
        })
    }
    .justifyContent(FlexAlign.End)
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS如何实现list listitem拖拽
954浏览 • 1回复 待解决
ListListItem组件的使用
1783浏览 • 1回复 待解决
HarmonyOS List动画效果
30浏览 • 1回复 待解决
HarmonyOS List第一个可见的ListItem
310浏览 • 1回复 待解决
Stage 模型下,ListItem 怎么复用?
341浏览 • 1回复 待解决
HarmonyOS 想在builder插入builder
83浏览 • 1回复 待解决
鸿蒙怎么实现动画翻转效果
10543浏览 • 2回复 待解决