Etiquetas (Chips)

Chips são pequenos elementos normalmente usados para listar propriedades relacionadas.

Os componentes Kirigami.Chip são pequenos elementos herdados de AbstractButton usados para exibir propriedades comuns ou filtros de algo. Normalmente, são elementos de texto, que também são interativos e vêm com um botão de exclusão opcional.

Início rápido

Chips podem ser facilmente adicionados usando o componente [Kirigami.Chip](https://api.kde.org/qml-org -kde-kirigami-chip.html). Ao atribuir uma string ao seu campo herdado AbstractButton.text, damos aos chips seus nomes.

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

Com repetidores (recomendado)

Como os chips devem ser usados mais de uma vez, você provavelmente desejará usar algum tipo de estrutura de dados de lista e iterar sobre eles para exibir os chips. Para fazer isso, precisamos de um componente ListModel e um componente Repetidor.

O ListModel é usado como armazenamento para os chips. Para preencher o ListModel (e, portanto, os chips), declaramos alguns componentes ListElement, que contêm um campo conhecido como text. Podemos usar essa string atribuída a partir daqui ao campo text para cada chip repetido.

O Repeater é usado para exibir os chips. Primeiro, precisamos definir o campo model do Repeater para o nosso ListModel, ou criar o ListModel dentro do repeater. Em seguida, declaramos o componente Kirigami.Chip dentro do Repeater e atribuímos ao seu campo text os dados do elemento usando a propriedade 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
                }
            }
        }
    }
}

Nota

Você pode adicionar e remover dados dinamicamente do ListModel, e o Repeater fará essas alterações automaticamente. No entanto, a simples alteração de um item específico do Repeater ou do ListModel não afeta o outro e requer a alteração de ambos, a menos que algo como QAbstractListModel seja usado. Consulte Aplicativo de exemplo para obter mais informações.

Aplicativo de exemplo

O aplicativo de exemplo abaixo mostra como chips podem ser usados em programas como listas de tarefas.

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

Gavetas

Tipos de diálogos