15

What is the equivalent of QMessageBox::information() when one wishes to write a QML application using Qt Quick Controls?

2

5 Answers 5

17

In Qt 6.3 and later you can use MessageDialog from QtQuick.Dialogs:

MessageDialog {
    text: "The document has been modified."
    informativeText: "Do you want to save your changes?"
    buttons: MessageDialog.Ok | MessageDialog.Cancel

    onAccepted: Qt.quit()
}

In Qt 6.2 and earlier you can use MessageDialog from Qt.labs.platform (using the same example code as above).

In Qt 5 you can use MessageDialog from QtQuick.Dialogs 1.x:

import QtQuick 2.2
import QtQuick.Dialogs 1.1

MessageDialog {
    id: messageDialog
    title: "May I have your attention please"
    text: "It's so cool that you are using Qt Quick."
    onAccepted: {
        console.log("And of course you could only agree.")
        Qt.quit()
    }
    Component.onCompleted: visible = true
}
6

You Can use Popup In QtQuick Controls 2 :

import QtQuick.Window 2.2
import QtQuick.Controls 2.0 // or import Qt.labs.controls 1.0

Window {
    id: window
    width: 400
    height: 400
    visible: true
Button {
    text: "Open"
    onClicked: popup.open()
}

Popup {
    id: popup
    x: 100
    y: 100
    width: 200
    height: 300
    modal: true
    focus: true
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
    }
}
2

Ok this does the job (badly). Import the Window object:

import QtQuick.Window 2.1

Then add this to your main window (or you could put it in another file I guess):

function showMessage(text, title)
{
    messageBox.text = text;
    messageBox.title = title;
    messageBox.visible = true;
}

Window {
    id: messageBox
    modality: Qt.ApplicationModal
    title: ""
    visible: false
    property alias text: messageBoxLabel.text
    color: parent.color
    minimumHeight: 100
    minimumWidth: 300
    Label {
        anchors.margins: 10
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: messageBoxButton.top
        horizontalAlignment: Text.AlignHCenter
        wrapMode: Text.WordWrap
        id: messageBoxLabel
        text: ""
    }

    Button {
        anchors.margins: 10
        id: messageBoxButton
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Ok"
        onClicked: messageBox.visible = false
    }
}

Problems with it:

  1. The window can be shrunk so that the text and button overlap.
  2. The minimum window size is hard-coded rather than calculated from the text size.
  3. You can't select the text.
  4. Looks a bit shit.
1

Unfortunately, there isn't one, at least not in the shipping Qt Quick Controls as of Qt 5.1.1 :(

You need to add it to your project via a QObject wrapper.

1
// CenteredDialog.qml
import QtQml 2.2

import QtQuick 2.9
import QtQuick.Controls 2.2

Dialog {
    parent: ApplicationWindow.overlay

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

    focus: true
    modal: true

    property alias text: messageText.text

    Label {
        id: messageText

        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter

        anchors.fill: parent
    }

    standardButtons: Dialog.Ok
}

You can declare CenteredDialog { id: centeredDialog } somewhere, then in some event handler you may call:

 centeredDialog.title = qsTr("Error!")
 centeredDialog.text = qsTr("Access violation")
 centeredDialog.visible = true

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.