Question

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

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

的main.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")
        }
    }
}

main.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"。我相信这很奇怪，因为当我开始输入＆＃34;状态＆＃34;并选择自动完成，它构建了整个结构，所以我认为它应该存在...

我是QML的新手，我并不完全熟悉现有动画的几个选项。我已经根据QT创建者附带的示例尝试了这个（animation.pro - 转换代码）。

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

Answer 1

Qt Creator有一项功能，您可以使用某些关键字插入代码段。您可以转到Tools > Options > Text Editor > Snippets来查看哪些代码段可用。

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

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

如果您想为窗口的位置设置动画，则可以使用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，否则状态行为错误，转换完成后您的窗口将消失。

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

2 个答案: