Chips

Chips zijn kleine elementen typisch gebruikt om een lijst te maken van gerelateerde eigenschappen.

Kirigami.Chip componenten zijn kleine elementen geërfd van AbstractButton gebruikt voor het tonen van gemeenschappelijke eigenschappen of filters van iets. Dit zijn typisch tekstelementen, waarop ook geacteerd kan worden en komt met een optionele knop voor wissen.

Snelstart

Chips kunnen gemakkelijk toegevoegd worden met de component Kirigami.Chip. Door het toekennen van een tekenreeks aan zijn text-veld geven we chips hun naam.

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 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"
            }
        }
    }
}

Met herhalers (aanbevolen)

Omdat chips bedoeld zijn om meer dan eens te worden gebruikt, wilt u waarschijnlijk een vorm van een gegevensstructuur mat een lijst gebruiken en er over itereren om de chips te tonen. Om dat te doen hebben we een ListModel nodig en een component Herhaler.

Het ListModel wordt gebruikt als opslag voor de chips. Om het ListModel te bevolken (en daarom chips), declareren we een aantal componenten ListElement, die een veld bevatten bekend als text. We kunnen deze vanhier aan het text-veld toegekende tekenreeks gebruiken voor elke herhaalde chip.

De Herhaler wordt gebruikt voor het tonen van de chips. Eerst moeten we het model-veld van de Herhaler aan ons ListModel instellen of het ListModel aanmaken binnen de herhaler. Daarna declareren we de component Kirigami.Chip binnen de Herhaler en kennen zijn text-veld toe met de gegevens van het element met gebruik van de eigenschap 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
                }
            }
        }
    }
}

Notitie

U kunt dynamisch gegevens achtervoegen en verwijderen uit het ListModel en de Herhaler zal automatisch deze wijzigingen doen. Echter, eenvoudig wijzigen van een specifiek item uit ofwel de Herhaler of ListModel heeft geen effect op de anderen en vereist het wijzigen van beiden, tenzij zoiets als QAbstractListModel wordt gebruikt. Zie Voorbeeldtoepassing voor meer informatie.

Voorbeeldtoepassing

De onderstaande voorbeeldtoepassing laat zien hoe chips gebruikt kunnen worden in programma's zoals te-doenlijsten.

 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 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 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)
                    }
                }
            }
        }
    }
}

Schuifladen

Overlay-vellen