QML 动画 - 移动应用程序窗口

Question

我想创建一个动画来移动（或调整）我使用 QML 构建的应用程序窗口。

我有以下代码（大部分是在我们创建QT快速控件应用程序时默认创建的：

ma​​in.cpp

#include <QApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

MainForm.ui.qml

import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Layouts 1.3

Item {
    width: 640
    height: 480

    property alias button1: button1
    property alias button2: button2

    RowLayout {
        anchors.centerIn: parent

        Button {
            id: button1
            text: qsTr("Press Me 1")
        }

        Button {
            id: button2
            text: qsTr("Press Me 2")
        }
    }
}

ma​​in.qml

import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Dialogs 1.2

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: console.log("Open action triggered");
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    MainForm {
        anchors.fill: parent
        button1.onClicked: Qt.quit();
        button2.onClicked: state = "other";
    }

    transitions: [
        Transition {
            from: "*"
            to: "other"
            NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 2000 }

        }
    ]

    states: [
        State {
           name: "other"
           PropertyChanges {
               target: mainWindow
               x: x + 200
           }
       }
    ]

    MessageDialog {
        id: messageDialog

        function show(caption) {
            messageDialog.text = caption;
            messageDialog.open();
        }
    }
}

使用这段代码，我只是想将我的窗口向右移动 200 像素。当我尝试运行它时，我得到qrc:/main.qml:42 Cannot assign to non-existent property "states"。我认为这很奇怪，因为当我开始输入“状态”并选择自动完成时，它为我构建了整个结构，所以我认为它应该存在......

我是 QML 新手，对现有的几种动画选项并不完全熟悉。这是我根据 QT creator 附带的示例（animation.pro - 转换代码）尝试过的。

我相信应该很简单吧？你能帮我解决这个问题吗？

Answer 1

Qt Creator 有一个功能，您可以使用某些关键字插入代码 sn-ps。你可以通过Tools > Options > Text Editor > Snippets查看哪些sn-ps可用。

片段将在自动完成弹出窗口中显示为红色，常规属性（或类型，如下所示）将显示为绿色：

所以，ApplicationWindow 没有 states 属性。如果您有任何疑问，请转到您感兴趣的类型的文档（例如http://doc.qt.io/qt-5/qml-qtquick-controls-applicationwindow.html），然后单击“List of all members, including inherited members”链接。这将向您显示所有属性、功能等。 到那种类型。

---

如果要为窗口的位置设置动画，可以使用NumberAnimation 而不使用状态：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.5

ApplicationWindow {
    id: window
    width: 400
    height: 400
    visible: true

    NumberAnimation {
        id: xyAnimation
        target: window
        properties: "x,y"
        easing.type: Easing.InOutQuad
        duration: 2000
        to: 500
    }

    Button {
        text: "Start"
        onClicked: xyAnimation.start()
    }
}

Answer 2

state 是Item 中的一个属性，但是ApplicationWindow 不是Item。要将状态/转换添加到非Item 类型，请使用StateGroup：

ApplicationWindow {
    id: mainWindow
    //your code...

    MainForm {
        button2.onClicked: { myWindowStates.state = "other";}
    }

    StateGroup {
        id: myWindowStates

        transitions: [
            Transition {
                from: "*"; to: "other"
                NumberAnimation { 
                    properties: "x,y"; easing.type: Easing.Linear; 
                    duration: 2000 
                }
            }
        ]

        states: [
            State {
               name: "other"
               PropertyChanges {
                   target: mainWindow
                   x: mainWindow.x + 200
                   explicit: true //Remember to set this
               }
           }
        ]
    }
}

记得将PropertyChange.explict设置为true，否则状态行为错误，过渡完成后你的窗口会消失。