QML动画完成后调用c++函数

Call C++ function after QML animation finishes

本文关键字：调用 c++ 函数 动画 QML      更新时间：2023-10-16

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

main.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开始。Imgur

作为一种解决方法，您可以将操作绑定到索引更改:

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
            }
        }
    }
}
相关文章：