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

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

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

Answer 3

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:
The window can be shrunk so that the text and button overlap.
The minimum window size is hard-coded rather than calculated from the text size.
You can't select the text.
Looks a bit shit.

Answer 4

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.

Answer 5

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