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()
    }
}

如何设置对话框的动画以从屏幕外部输入？

1 个答案: