Patatine fritte

I chip sono piccoli elementi generalmente utilizzati per elencare le proprietà correlate.

I componenti Kirigami.Chip sono piccoli elementi ereditati da AbstractButton utilizzati per visualizzare proprietà comuni o filtri di qualcosa. Si tratta in genere di elementi di testo, anch'essi interattivi e dotati di un pulsante Elimina opzionale.

Avvio rapido

I chip possono essere facilmente aggiunti utilizzando il componente Kirigami.Chip. Assegnando una stringa al campo AbstractButton.text ereditato, diamo ai chip il loro nome.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Chips"

    pageStack.initialPage: Kirigami.Page {
        title: "Chips"

        Kirigami.FormLayout {
            anchors.fill: parent
            Kirigami.Chip {
                text: "Chip 1"
            }
            Kirigami.Chip {
                text: "Chip 2"
            }
            Kirigami.Chip {
                text: "Chip 3"
            }
        }
    }
}

Dichiarazione e visualizzazione dei chip

Con ripetitori (consigliato)

Poiché i chip sono pensati per essere utilizzati più di una volta, probabilmente vorrai utilizzare una sorta di struttura dei dati dell'elenco e scorrere su di essi per visualizzare i chip. Per fare ciò, abbiamo bisogno di un componente ListModel e un componente Repeater.

Il ListModel viene utilizzato come spazio di archiviazione per i chip. Per popolare il ListModel (e quindi i chip), dichiariamo una coppia di componenti ListElement, che contengono un campo noto come text. Possiamo usare questa stringa assegnata da qui al campo testo per ogni chip ripetuto.

Il ripetitore viene utilizzato per visualizzare i chip. Innanzitutto, dobbiamo impostare il campo model del Repeater sul nostro ListModel o creare il ListModel all'interno del ripetitore. Quindi, dichiariamo il componente Kirigami.Chip all'interno del Repeater e assegniamo al suo campo text i dati dell'elemento utilizzando la proprietà modelData.

Kirigami.ApplicationWindow {
    id: root
    title: "Chips"

    ListModel {
        id: chips

        ListElement { text: "Chip 1" }
        ListElement { text: "Chip 2" }
        ListElement { text: "Chip 3" }
    }

    pageStack.initialPage: Kirigami.Page {
        title: "Chips"

        Kirigami.FormLayout {
            anchors.fill: parent
            Repeater {
                Layout.fillWidth: true
                model: chips

                Kirigami.Chip {
                id: chip
                    text: modelData
                }
            }
        }
    }
}

Nota

Puoi aggiungere e rimuovere dinamicamente i dati da ListModel e il ripetitore apporterà automaticamente tali modifiche. Tuttavia, la semplice modifica di un elemento specifico da Repeater o ListModel non influisce sull'altro e richiede la modifica di entrambi, a meno che non venga utilizzato qualcosa come QAbstractListModel. Per ulteriori informazioni, vedere Applicazione di esempio.

Esempio di applicazione

L'applicazione di esempio seguente mostra come i chip possono essere utilizzati in programmi come gli elenchi di cose da fare.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    id: root
    title: "Chips"

    ListModel {
        id: chips

        ListElement { text: "Chip 1" }
        ListElement { text: "Chip 2" }
        ListElement { text: "Chip 3" }
    }

    pageStack.initialPage: Kirigami.Page {
        title: "Chips"

        Kirigami.OverlaySheet {
            id: editChipPrompt

            property var chip;
            property var index;

            header: Kirigami.Heading {
                text: "Edit Chip"
            }

            footer: DialogButtonBox {
                standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel
                onAccepted: {
                    // Both the data from the Repeater and ListModel must be
                    // edited in order to update both.
                    editChipPrompt.chip.text = editTextField.text;
                    chips.setProperty(editChipPrompt.index, "text", editTextField.text);
                    editChipPrompt.close();
                }
                onRejected: {
                    editChipPrompt.close();
                }
            }

            TextField {
                id: editTextField
            }
        }

        Kirigami.FormLayout {
            anchors.fill: parent
            TextField {
                id: insertTextField
                Kirigami.FormData.label: "Item:"
                onAccepted: chips.append({ text: insertTextField.text })
            }
            // Wrapped in ColumnLayout to prevent binding loops.
            ColumnLayout {
                Layout.alignment: Qt.AlignHCenter
                Repeater {
                    model: chips

                    Kirigami.Chip {
                        id: chip
                        text: modelData
                        onClicked: {
                            editTextField.text = modelData;
                            editChipPrompt.chip = chip;
                            editChipPrompt.index = index;
                            editChipPrompt.open();
                        }
                        onRemoved: chips.remove(index)
                    }
                }
            }
        }
    }
}

Cassetti

Tipi di finestra