如何在QtQuick Controls 2的屏幕上居中对话？

Question

我的所有对话框都显示在屏幕的左上角而不是中心.

让对话框自动放置的最佳方法是什么？

import QtQuick 2.7
import QtQuick.Controls 2.2

ApplicationWindow {
    id: mainWindow

    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Component.onCompleted: {
        showMessageBox('Hey this actually works!');
    }

    function showMessageBox(message) {
        var component = Qt.createComponent("MessageDialog.qml")
        if(component.status == Component.Ready) {
            var dialog = component.createObject(mainWindow)

            dialog.title = qsTr("Information")
            dialog.text = message

            dialog.open()
        } else
            console.error(component.errorString())
    }
}

使用非常简单的MessageDialog.qml:

import QtQuick 2.7
import QtQuick.Controls 2.2

Dialog {
    standardButtons: DialogButtonBox.Ok

    property alias text : textContainer.text

    Text {
        id: textContainer

        anchors.fill: parent

        horizontalAlignment: Qt.AlignLeft
        verticalAlignment: Qt.AlignTop
    }
}

Answer 1

文档暗示,那Dialog是的后代Popup具有x/y坐标- .

我认为这将是一个良好的开端.

为了你的利益:

• parent.width - 应该是窗户的宽度
• width- 这应该是你Dialog的宽度
• parent.height
• height

计算正确的位置,你应该没事.

有了这个,您可以创建一个新的基类 CenteredDialog.qml

Dialog {
    x: (parent.width - width) / 2
    y: (parent.height - height) / 2
}

然后使用CenteredDialog而不是Dialog所有的时间.

此外,对于动态实例化,您可以Component在文件中声明,并且仅在使用component.createObject(parentObject, { property1Name : property1Value, property2Name : property2Value ... })语法进行实例化时设置属性.

Answer 2

从 Qt 5.12 开始，您可以使用anchors.centerIn附加属性。

Dialog {
    anchors.centerIn: parent
    // ...
}

然后它将以其父级为中心。如果您希望它在窗口居中，只需将其父级设置为Overlay.overlay。

Answer 3

您可以设置 x/y 位置（如 derM 所说），但您必须重新计算 ApplicationWindow 的每个大小变化！

这是另一个解决方案：

ApplicationWindow {
    id: mainWindow

    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Component.onCompleted: {
        showMessageBox('Hey this actually works!');
    }

    Item {
        anchors.centerIn: parent
        width: msgDialog.width
        height: msgDialog.height
        MessageDialog {
            id: msgDialog
            title: qsTr("Information")
            visible: false
        }
    }

    function showMessageBox(message) {
        msgDialog.text = message
        msgDialog.visible = true
    }

更新：使用动态实例化：

 Item {
    id: dialogParent
    anchors.centerIn: parent
 }

 function showMessageBox(message) {
    var component = Qt.createComponent("MessageDialog.qml")
    if(component.status === Component.Ready) {
        var dialog = component.createObject(dialogParent)

        dialog.title = qsTr("Information")
        dialog.text = message
        dialog.open()

        dialogParent.width = dialog.width
        dialogParent.height = dialog.height
    } else {
        console.error(component.errorString())
    }
 }

Answer 4

对于适用于任何地方的通用代码，包括在 Window/ApplicationWindow 之外，您应该使用 Overlay parent ：

Dialog {
    parent: Overlay.overlay // <------- global Overlay object
    readonly property int margin: 16
    width: parent ? (parent.width / 2 - margin) : 128
    height: content.height + margin
    x: parent ? ((parent.width - width) / 2) : 0
    y: parent ? ((parent.height - height) / 2) : 0
    modal: true

   Label {
      id: content
      ...   
   }
}