QML中ListView动态添加元素时displaced ViewTransition未触发问题

问题原因 #

造成displaced过渡不触发的核心原因有两个：

• 你调用的是ListModel.append()方法向列表尾部添加元素，此时已存在的列表项位置不会发生任何位移，自然满足不了displaced过渡的触发条件。displaced过渡只会在现有列表项因为模型增删改操作发生位置偏移时才会执行。你参考的示例代码用的是model.insert(0, ...)向列表头部插入新元素，原有所有列表项都会向下偏移，所以会触发displaced过渡。
• 你的自定义delegate没有显式声明高度，虽然Text组件有隐式高度，但可能导致ListView计算布局偏移时出现异常，即使向头部插入元素也可能出现动画失效的问题。

修复方案 #

1. 把Timer触发的插入逻辑从append改为向头部插入：

onTriggered: notificationModel.insert(0, {"name": "Stark"})

2. 给delegate的Row组件显式设置高度，比如：

Component {
    id: notificationDelegate
    Row {
        height: 24 // 显式设置高度匹配文字尺寸
        spacing: 20
        Text { text: name; color: "white" }
    }
}

修改后即可看到原有列表项向下弹跳的displaced过渡效果。

内容的提问来源于stack exchange，提问作者Evan Krause