Чипы

Чипы — это небольшие элементы, обычно используемые для перечисления связанных свойств.

Компоненты Kirigami.Chip — небольшие элементы, унаследованные от AbstractButton, которые используются для показа общих свойств или фильтров чего-либо. Как правило, это текстовые элементы, с которыми также можно взаимодействовать; они имеют необязательную кнопку удаления.

Пример компонентов Chip в галерее Kirigami

Начало работы

Чипы легко добавляются с помощью компонента Kirigami.Chip. Присвоение строки унаследованному полю AbstractButton.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"
            }
        }
    }
}

С использованием Repeater (рекомендуется)

Так как чипы предназначены для многократного использования, скорее всего, потребуется применить какую-либо структуру данных списка и перебирать их для показа чипов. Для этого нужны компоненты ListModel и Repeater.

ListModel используется как хранилище для чипов. Чтобы заполнить ListModel (а следовательно, и чипы), объявляется пара компонентов ListElement, содержащих поле с именем text. Строку, заданную здесь, можно использовать в качестве значения поля text для каждого повторяющегося чипа.

Repeater используется для показа чипов. Сначала нужно присвоить полю model компонента Repeater наш ListModel или создать ListModel внутри Repeater. Затем внутри Repeater объявляется компонент Kirigami.Chip, а его поле 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)
                    }
                }
            }
        }
    }
}

Выдвижные панели

Типы диалогов