CODEWITHSUNDEEP
qtqmlqt5qtquick2qtquickcontrols2
feedc0de
feedc0de

Reputation: 3796

How to center dialog on screen in QtQuick Controls 2?

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

Upvotes: 17

Views: 15249

Answers (5)

derM
derM

Reputation: 13701

The documentation for Qt5 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.

Note Qt 5.12 and higher can use anchors.centerIn, see answer from @lateus

Upvotes: 17

Ismet Meta
Ismet Meta

Reputation: 11

anchors.centerIn: Overlay.overlay

Upvotes: 0

lateus
lateus

Reputation: 411

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.

Upvotes: 9

DevMultiTech
DevMultiTech

Reputation: 372

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

Upvotes: 6

Hubi
Hubi

Reputation: 1639

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

Upvotes: 5

Related Questions