Чіпси

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

Компоненти Kirigami.Chip є малими елементами, які успадковують властивості від AbstractButton і які використовують для показу типових властивостей або фільтрів чогось. Типово, це текстові елементи, з якими можна взаємодіяти і які містять необов'язкову кнопку вилучення даних.

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

Чіпси можна без проблем додати за допомогою компонента 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
                }
            }
        }
    }
}

Нотатка

Ви можете у динамічному режимі додавати дані до ListModel або вилучати дані з неї, а Repeater вноситиме зміни автоматично. Втім, проста зміна певного запису з Repeater або ListModel не вплине на інший компонент і потребує внесення змін до обох, якщо не використано щось подібне до QAbstractListModel. Див. приклад програми, щоб дізнатися більше.

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

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

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

Типи вікон

Керування і інтерактивні елементи