c++ - QML 动画结束后调用 C++ 函数

Question

我需要在 SwipeView 动画结束后从 UI 调用带有参数的 C++ 类方法。

主要.ui

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

SwipeView {
    id: swipeView
    anchors.fill: parent

    Page1 {
        id: page1
    }

    Page2{
        id: page2
    }
}

XOR {
    id: xor
    onXorEnded: {
        //swipeView.setCurrentIndex(0)
    }
    onQChanged: {
        page2.bar.value = xor.getq()
    }
}

Page1Form.ui.qml

Page1Form {



kpButton.onClicked: {
    kpDialog.visible = true
}

xorButton.onClicked: {
    swipeView.setCurrentIndex(1)
    xor.crypt(file_path.text, key_path.text, out_path.text)
}

fpButton.onClicked:{
    fpDialog.visible = true
}


FileDialog {
    id: fpDialog
    onAccepted: {
        file_path.text = fpDialog.fileUrl
    }
}

FileDialog {
    id: kpDialog
    onAccepted: {
        key_path.text = kpDialog.fileUrl
    }
}
}

似乎在 xorButton.onClicked 中 xoring 在滑动 View 动画结束之前开始。现在如何运作:Imgur

Answer 1

作为解决方法，您可以将您的操作绑定(bind)到索引更改:

xorButton.onClicked: {
    swipeView.setCurrentIndex(1)
}


SwipeView {
    id: swipeView
    onCurrentItemChanged: {
        if(currentIndex == 1)
            xor.crypt(file_path.text, key_path.text, out_path.text)
    }
}

但无论如何，它不会在动画结束时触发。

作为另一种解决方法，您可以使用 StackView。它有更多的属性来控制动画。此控件的另一个优点是用户无法在您不期望的时候滑动它。在您的情况下，用户只需轻扫即可。还有一个优点是页面在您不需要时不会占用内存。

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.0


Window {
    visible: true
    width: 800
    height: 800
    StackView {
        id: view
        anchors.fill: parent
        initialItem: page1
        onBusyChanged: {
            if(!busy && currentItem.objectName == "page2")
                currentItem.run();
        }
    }
    Component {
        id: page1
        Rectangle {
            color: "green"
            objectName: "page1"
            Button {
                anchors.centerIn: parent
                text: "swipe me"
                onClicked:
                    view.push(page2)
            }
        }
    }

    Component {
        id: page2
        Rectangle {
            color: "yellow"
            objectName: "page2"
            function run() { sign.visible = true; }

            Rectangle {
                id: sign
                anchors.centerIn: parent
                width: 100
                height: 100
                radius: 50
                color: "red"
                visible: false
            }
        }
    }

}