Home / Programmazione / C - C++ / Creare un dialog con QML
Mattepuffo

Creare un dialog con QML

Creare un dialog con QML

Faccio un passo in più, e vediamo come aprire una finestra di dialogo cliccando su un elemento della ListView.

Qui abbiamo visto come riempire una ListView da dati JSON.

Come possiamo vedere, sulla ListView mostriamo solo un campo rispetto a quelli che prendiamo.

Adesso, cliccando su una riga, vogliamo vedere anche gli altri.

Prima di tutto creiamo un altro file QML (detail_dialog.qml) con questo dentro:

import QtQuick 2.0

Item {
    id: detailDialog
    anchors.fill: parent
    PropertyAnimation {
        target: detailDialog
        property: "opacity"
        duration: 400
        from: 0
        to: 1
        easing.type: Easing.InOutQuad
        running: true
    }

    Rectangle {
        id: dialogWindow
        width: 200
        height: 200
        radius: 10
        border.color: "black"
        anchors.centerIn: parent
        Text {
            anchors.centerIn: parent
            text: "AUTORE: " + author + "\nEDITORE: " + editor + "\nPREZZO: " + price + "\nISBN: " + isbn + "\nNOTE: " + note
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                detailDialog.destroy()
            }
        }
    }
}

Adesso dobbiamo intercettare l'evento click sulla riga nella finestra principale.

Per farlo dobbiamo usare una MouseArea e l'evento onClicked.

Qua sotto il codice completo:

import QtQuick 2.0
import QtQuick.Controls 1.0
import "script.js" as Script

ApplicationWindow {
    id: mainWindow
    title: "App"
    visible: true
    width: 600
    height: 600

    Component.onCompleted: Script.load()

    ListModel { id: listModelJson }

    Rectangle {
        height: parent.height
        width: parent.width
        ListView {
            id: listViewJson
            x: 0
            y: 0
            width: 600
            height: 592
            delegate: Rectangle {
                width: parent.width
                height: 70
                color: index % 2 == 0 ? "white" : "gray"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        Qt.createComponent("detail_dialog.qml").createObject(mainWindow, {});
                    }
                    Text {
                        text: title
                    }
                }
            }
            model: listModelJson
        }
    }
}

Direi piuttosto semplice, in stile QML.

Abbiamo usato il metodo createComponent, passando come argomento il file da richiamare.

Potevamo anche scrivere il codice li dentro, ma non è molto comodo.

Ciao!!