Chips

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

About Kirigami API documentation: use https://api-staging.kde.org/kirigami-index.html for now

Click here to read more

We are aware of issues involving broken links to Kirigami API documentation. We are currently working on a better website to address these issues, porting the API docs where possible.

In its current state, the staging API website under development for Kirigami can be used to access all relevant Kirigami API pages, and it should already work better than the previous API website. You can access the staging API website through https://api-staging.kde.org/kirigami-index.html.

If you'd like to assist us in our efforts to port the API documentation, take a look at our Port API documentation to QDoc metatask.

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
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"
            }
        }
    }
}

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 van hier 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
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)
                    }
                }
            }
        }
    }
}

Schuifladen

Dialoogtypen