How do I show a message box with Qt Quick Controls?

Question

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

Answer 1

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
}

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

Answer 3

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