QtQuick2中按钮动画完成后替换StackView页面的实现问题

问题场景 #

基于QtQuick2构建界面，使用StackView管理页面，希望按钮触发按压动画（切换图片后恢复）完成后，再执行页面切换。现有代码中，尝试在动画后直接调用stackViewTool.replace()或用Component.onCompleted均未生效。

现有核心代码：

StackView定义 #

StackView {
    id: stackViewTool
    anchors {
        left: parent.left
        right: parent.right
        top: parent.top
        bottom: bottomBar.top
    }
    initialItem: initializePage
}

property string initializePage : "HomePage.qml"

按钮及动画定义 #

SimpleButton {
    id:homeClicked
    Image{
        id: homeID
        source:"/images/barHome.png"
    }
    onClicked: {
        stackViewTool.replace(initializePage)
    }

    SequentialAnimation {
        id : homePressed
        PropertyAnimation {
            targets: [homeID]
            property: "source"
            to: "/images/pressedHome.png"
        }

        PauseAnimation {
            duration: 100
        }

        PropertyAnimation {
            targets: [homeID]
            property: "source"
            to: "/images/barHome.png"
        }

        PauseAnimation {
            duration: 100
        }
    }
}

解决方法 #

利用SequentialAnimation的onStopped信号，该信号会在动画完全执行完毕时触发，此时再执行页面切换操作即可。

修改后的按钮代码 #

SimpleButton {
    id:homeClicked
    Image{
        id: homeID
        source:"/images/barHome.png"
    }
    onClicked: {
        // 点击时先启动动画，不直接切换页面
        homePressed.start()
    }

    SequentialAnimation {
        id : homePressed
        // 动画完成时触发页面切换
        onStopped: {
            stackViewTool.replace(initializePage)
        }

        PropertyAnimation {
            targets: [homeID]
            property: "source"
            to: "/images/pressedHome.png"
            // 显式设置动画时长，确保视觉反馈清晰
            duration: 50
        }

        PauseAnimation {
            duration: 100
        }

        PropertyAnimation {
            targets: [homeID]
            property: "source"
            to: "/images/barHome.png"
            duration: 50
        }

        PauseAnimation {
            duration: 100
        }
    }
}

关键说明 #

• 不要在动画代码块内直接调用页面切换，因为动画是异步执行的，同步调用会导致页面切换先于动画完成。
• 若需仅在动画正常完成时执行切换，可在onStopped内增加状态判断：if (status === Animation.Stopped)，避免动画被中断时误触发页面切换。

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