QML GridView宽度变化时如何取消正在运行的Transition过渡动画？

你之前调用动画complete()、切换transition的enabled属性无效的核心原因有两个：

1. Transition中定义的动画只是模板，GridView触发位移时会为每个delegate单独生成独立的动画实例，你调用模板动画的方法无法作用到正在运行的实例上。
2. 已经启动的过渡动画不会因为Transition本身的enabled状态变化而中止，该属性只会影响后续新触发的过渡效果。

修复方案 #

利用GridView内置的forceLayout()方法，该方法可以强制GridView立即重新计算所有delegate的正确布局位置，跳过所有过渡动画。只需在宽度变化时临时移除displaced过渡，避免布局刷新时触发新的过渡，布局完成后再恢复过渡即可。

关键代码修改 #

仅需要调整GridView的onWidthChanged信号处理逻辑，其余原有代码保持不变：

GridView {
    id: grid_view
    width: parent.width
    height: parent.height
    cellWidth: grid_view.width / 5
    cellHeight: 70
    model: my_model
    delegate: Rectangle {
        width: grid_view.cellWidth
        height: grid_view.cellHeight
        color: index % 2 ? "red" : "blue"
        border.width: 2
    }
    displaced: Transition {
        NumberAnimation {
            properties: "x,y"
            duration: 2000
        }
    }

    onWidthChanged: {
        const savedTransition = displaced
        displaced = null
        forceLayout()
        displaced = savedTransition
    }
}

效果验证 #

修改后在位移过渡动画执行过程中修改GridView宽度，所有正在动画的delegate都会立即跳转到正确的目标位置，不会出现错位问题。

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