How to center dialog on screen in QtQuick Controls 2?

user_1798015 0
Viewed 11927

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?

enter image description here

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
    }
}
qtquickcontrols2 qtquick2 qml qt5 qt
5 Answers

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
      ...   
   }
}
user_15458740

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.

user_113196390

anchors.centerIn: Overlay.overlay

user_114044930
Related