How to center dialog on screen in QtQuick Controls 2?

Question

All my dialogs appear on the top left corner of screen instead of the center.

What is the best way to let the dialogs be placed automatically correct?

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

With a very simple 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

As of Qt 5.12 you can use anchors.centerIn attached property.

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

Then it will be centered on its parent. If you want it to be centered on its window, just set its parent to Overlay.overlay.

Answer 2

The documentation hints, that the Dialog is a descendent of Popup which has x/y-coordinates.

I think those would be a good start to position it.

To your avail:

• parent.width - which should be the width of your window
• width - which should be your Dialogs width
• parent.height
• height

Calculate the right positions, and you should be fine.

With this you can create a new base class CenteredDialog.qml

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

and then use CenteredDialog instead of Dialog all the time.

Further, for dynamic instantiation you might declare the Component in the file, and only set the properties upon instantiation using the component.createObject(parentObject, { property1Name : property1Value, property2Name : property2Value ... }) syntax.

Answer 3

You can set x/y position (like derM said), but you have to recalculate every size change of ApplicationWindow!

Here is another solution:

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
    }

UPDATE: with dynamic instantiation:

 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

For a generic code which works anywhere, including out of Window/ApplicationWindow, you should use 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
      ...   
   }
}