如何为 Dialog 设置动画以从屏幕外进入？

Question

这个问题类似于 - 但与Moving qml Item out of left side of window 不同，因为我的问题是关于对话框，而不是一般的项目。区别如下所述。

我有一个 Qt 对话框，我想从左侧进入屏幕。

我采取的第一种方法是将对话框的x 属性设置为-width，然后添加Behavior on x 或手动触发的NumberAnimation。

但是这种方法失败了，因为不允许设置负的 x 值并且该值立即更改为 0。

post 通过使用锚点和AnchorChanges 和transitions 提供了解决此问题的方法 - 但仅适用于项目。

但是，Dialog 类型既不提供状态，也不提供锚点，而只提供坐标。

所以我的问题是：如何让 QML 对话框从屏幕左侧的动画显示到视图中？

这是一个最小的代码示例，演示了 x 属性被重置为 0：

import QtQuick 2.7
import QtQuick.Controls 2.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Dialog Demo")

    Dialog {
        id: dialog

        width: 200
        height: 200

        x: -width

        Text {
            anchors.centerIn: parent
            text: "Ok?"
        }

        standardButtons: Dialog.Ok
        onOpened: x = 100

        Behavior on x { NumberAnimation{ duration: 1000 } }
    }

    Component.onCompleted: dialog.open()
}

Answer 1

你可以使用继承自Popup的enter-transition：

import QtQuick 2.9
import QtQuick.Window 2.0
import QtQuick.Controls 2.3

Window {
    id: window
    visible: true
    width: 600
    height: 600

    Dialog {
        id: dialog
        width: 300
        height: 300

        enter: Transition {
            NumberAnimation { properties: "x,y"; from: -300; to: 150 }
        }
    }

    Button {
        anchors.centerIn: parent
        onClicked: dialog.open()
    }
}

Dialog 似乎有一个错误。只要Dialog 有一些内容，它就会失败。我还没有发现它的所有深度，但是将所有内容都包含在 Item 中似乎有所帮助。比较一下：

import QtQuick 2.9
import QtQuick.Window 2.0
import QtQuick.Controls 2.3

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

    Dialog {
        id: dialog
        width: 300
        height: 300

        enter: Transition {
            NumberAnimation { properties: "x,y"; from: -300; to: 150; duration: 5000 }
        }

        // HAVE A BUTTON IN THE DIALOG -> POSITIONING FAILS
        Button {
            anchors.centerIn: parent
        }    
    }

    Button {
        text: 'open'
        anchors.centerIn: parent
        onClicked: dialog.open()
    }
}

和

import QtQuick 2.9
import QtQuick.Window 2.0
import QtQuick.Controls 2.3

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

    Dialog {
        id: dialog
        width: 300
        height: 300

        enter: Transition {
            NumberAnimation { properties: "x,y"; from: -300; to: 150; duration: 5000 }
        }

        Item {  // WRAP IT IN THE ITEM -> WORKS FOR ME
            anchors.fill: parent
            Button {
                anchors.centerIn: parent
            }
        }
    }

    Button {
        text: 'open'
        anchors.centerIn: parent
        onClicked: dialog.open()
    }
}