Štítky

Čipy sú malé prvky typicky používané na zobrazenie súvisiacich vlastností.

Komponenty Kirigami.Chip sú malé prvky zdedené z AbstractButton, používané na zobrazenie bežných vlastností alebo filtrov niečoho. Zvyčajne sú to textové prvky, ktoré sú tiež interaktívne a obsahujú voliteľné tlačidlo na vymazanie.

Rýchly štart

Čipy sa dajú jednoducho pridať pomocou komponentu Kirigami.Chip. Priradením reťazca do zdedeného poľa AbstractButton.text dáme čipom ich názov.

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

S Repeater (Odporúčané)

Keďže čipy sú určené na opakované použitie, pravdepodobne budete chcieť použiť nejaký druh dátovej štruktúry zoznamu a iterovať cez ne na zobrazenie čipov. Na to potrebujeme komponent ListModel a Repeater.

ListModel sa používa ako úložisko pre čipy. Na naplnenie ListModel (a teda aj čipov) deklarujeme niekoľko komponentov ListElement, ktoré obsahujú pole s názvom text. Tento reťazec priradený odtiaľto do poľa text môžeme použiť pre každý opakovaný čip.

Repeater sa používa na zobrazenie čipov. Najprv musíme nastaviť pole model Repeatera na náš ListModel alebo vytvoriť ListModel vo vnútri repeatera. Potom deklarujeme komponent Kirigami.Chip vo vnútri Repeatera a priradíme jeho pole text dátami prvku pomocou vlastnosti 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
                }
            }
        }
    }
}

Poznámka

Môžete dynamicky pridávať a odstraňovať dáta z ListModel a Repeater tieto zmeny automaticky vykoná. Avšak jednoduchá zmena konkrétnej položky z Repeatera alebo ListModel neovplyvní druhý a vyžaduje zmenu oboch, pokiaľ sa nepoužije niečo ako QAbstractListModel. Ďalšie informácie nájdete v časti Príkladová aplikácia.

Príklad aplikácie

Príkladová aplikácia nižšie ukazuje, ako sa dajú čipy použiť v programoch, ako sú zoznamy úloh.

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

Zásuvky

Typy dialógov