Chips

Chips är små element som vanligtvis används för att lista relaterade egenskaper.

Kirigami.Chip komponenter är små element som ärvs från AbstractButton och som används för att visa vanliga egenskaper eller filtrera något. Det är vanligtvis textelement, som också är ändringsbara och levereras med en valfri borttagningsknapp.

Snabbstart

Chips kan enkelt läggas till genom att använda komponenten Kirigami.Chip. Genom att tilldela en sträng till deras fält text, ger vi chips sina namn.

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

Med Repeaters (rekommenderas)

Eftersom chips är avsedda att användas mer än en gång, vill man förmodligen använda någon form av datastruktur med listor och iterera över den för att visa chipsen. För att göra det behöver vi en ListModel och en Repeater /qt-6/qml-qtquick-repeater.html) komponent.

ListModel används som lagring för chips. För att fylla i ListModel (och därmed chips), deklarerar vi ett par ListElement-komponenter, som innehåller ett fält som kallas text. Vi kan tilldela strängen härifrån till fältet text för varje upprepat chips.

En Repeater används för att visa chips. Först måste vi ange Repeater-fältet model i vår ListModel, eller skapa en ListModel inuti en Repeater. Därefter deklarerar vi komponenten Kirigami.Chip inne i vår Repeater och tilldelar elementens data i fältet text med hjälp av egenskapen 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
                }
            }
        }
    }
}

Anmärkning

Man kan lägga till och ta bort data från en ListModel dynamiskt, så gör motsvarande Repeater ändringarna automatiskt. Men att helt enkelt ändra ett specifikt objekt antingen i en Repeater eller en ListModel påverkar dock inte den andra, utan kräver att båda ändras, såvida inte något som en QAbstractListModel används. Se exempelprogrammet för mer information.

Exempelprogram

Exempelprogrammet nedan visar hur chips kan användas i program såsom uppgiftslistor.

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

Lådor

Typer av dialogrutor