Čipi

Čipi so majhni elementi, ki se običajno uporabljajo za navajanje povezanih lastnosti.

Komponente Kirigami.Chip so podedovani majhni elementiiz AbstractButton, ki se uporabljajo za prikaz skupnih lastnosti ali filtrov nečesa. To so tipično besedilni elementi, ki so tudi interaktivni inimajo izbirni gumb za brisanje.

Hitri zagon

Čipe lahko preprosto dodate s komponento Kirigami.Chip. Z dodelitvijoniza v njegovo polje 'text', damo čipom njihovo ime.

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

Z repetitorji (priporočeno)

Ker so čipi namenjeni večkratni uporabi, jih boste verjetno želeli uporabiti nekakšno podatkovno strukturo seznama in iteracijo na njih za prikaz čipov. Za to potrebujemo ListModel in Repeater.

ListModel se uporablja kot shramba za čipe. Za zapolnitev ListModel (in s tem čipov), deklariramo nekaj komponent ListElement, ki vsebuje polje, znano kot besedilo. Ta niz, ki je dodeljen od tukaj, lahko uporabimo v polju text za vsak ponovljeni čip.

Repetitor se uporablja za prikaz čipov. Najprej moramo nastavitimodel Repetitorja v naš ListModel ali ustvarite ListModelznotraj repetitorja. Nato deklariramo komponento Kirigami.Chip znotrajrepetitorja in dodeli njegovo besedilno polje s podatki elementa z uporabolastnosti 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
                }
            }
        }
    }
}

Opomba

Podatke lahko dinamično dodajate in odstranjujete iz ListModel inrepetitor bo samodejno naredil te spremembe. Vendar preprosto spreminjanje določenega elementa iz repetitorja ali ListModela ne vpliva na drugo, in zahteva menjavo obeh, razen če je kaj uporabljeno podobnega QAbstractListModel. Za več informacij glejte Primer aplikacije.

Primer aplikacije

Spodnji primer aplikacije prikazuje, kako je mogoče čipe uporabiti v programih kot so seznami opravil.

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

Predali

Prekrivne plasti listov