onclicked

Mattepuffo's logo
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.