Чіпси

Чіпси — малі елементи, які типово використовують для зберігання списків пов'язаних властивостей.

Kirigami.Chip components are small elements inherited from AbstractButton used for displaying common properties or filters of something. These are typically text elements, which is also interactable and comes with an optional delete button.

Приклад чіпсів у галереї Kirigami

Початкові зауваження

Чіпси можна без проблем додати за допомогою компонента Kirigami.Chip. Наданням рядкових даних для поля text чіпса ми надаємо чіпсу назву.

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"
            }
        }
    }
}
Оголошення і показ чіпсів

Із повторювачами (рекомендовано)

Оскільки чіпси призначено для багаторазового використання, ймовірно, вам потрібна буде певна структура спискових даних та ітерація за ними для показу чіпсів. Для цього нам знадобляться компоненти ListModel і Repeater.

ListModel буле використано як сховище для чіпсів. Для заповнення ListModel (і отже, чіпсів), ми оголошуємо двійко компонентів ListElement, які містять поле, відоме як text. Ми можемо скористатися цим рядком, який тут пов'язано із полем text, для кожного повторюваного чіпса.

Repeater буде використано для показу чіпсів. Спочатку, для поля model Repeater встановлюємо нашу ListModel або створюємо ListModel у повторювачі. Далі, ми оголошуємо компонент Kirigami.Chip всередині Repeater і пов'язуємо його поле text із даними елемента за допомогою властивості 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
                }
            }
        }
    }
}

Приклад програми

У прикладі програми, який наведено нижче, висвітлено можливість використання чіпсів у програмах, зокрема у списках завдань.

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

Приклад програми з чіпсами