javascriptqtqmlqt5qtquickcontrols

Using dialogs in QML


What if at some moment of time I need to get user input by calling dialog window or something like that. What is the best way to implement this using QML? Any analogs of prompt in js?


Solution

  • You can use Dialog, available since Qt 5.3, and customize it as you wish. Ensure, that you have this version installed and working.

    Here you can find example.

    Also, take a look at small example I've prepared:

    import QtQuick 2.2
    import QtQuick.Controls 1.1
    import QtQuick.Dialogs 1.2
    
    ApplicationWindow {
        visible: true
        width: 320
        height: 240
        title: qsTr("Custom Dialog")
    
        Dialog {
            id: customDialog
            title: "Custom Dialog in QML/Qt 5.3"
            standardButtons: StandardButton.Ok | StandardButton.Cancel
    
            Column {
                anchors.fill: parent
                Text {
                    text: "Here goes all your custom elements..."
                }
                TextInput {
                    id: edtInput
                    text: "Input text"
                }
            }
    
            onButtonClicked: {
                if (clickedButton==StandardButton.Ok) {
                    console.log("Accepted " + clickedButton)
                    lblResults.text += edtInput.text
                } else {
                    console.log("Rejected" + clickedButton)
                }
            }
        }
        Column {
            anchors.fill: parent
    
            Button {
                text: qsTr("Call Custom dialog")
                onClicked: customDialog.open()
            }
    
            Text {
                id: lblResults
                text: qsTr("Results: ")
            }
        }
    }