Chips
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.
Inicio rápido
Se pueden añadir Chips con facilidad usando el componente Kirigami.Chip
. Proporcionamos un nombre a un chip asignando una cadena al campo 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"
}
}
}
}

Con repetidores (recomendado)
Como los chips están diseñados para usarse más de una vez, probablemente querrá usar algún tipo de estructura de datos de lista y realizar una iteración para mostrarlos. Para ello, necesitamos un ListModel y un componente Repeater.
El ListModel se usa para almacenar los chips. Para rellenar el ListModel (y, por lo tanto, los chips), declaramos un par de componentes ListElement, que contienen un campo llamado text
. Podemos usar esta cadena asignada desde aquí al campo text
para cada chip repetido.
The Repeater is used for displaying the chips. First, we need to set the model
field of the Repeater to our ListModel, or create the ListModel inside of repeater. Then, we declare the Kirigami.Chip
component inside of the Repeater, and assign its text
field with the element's data using the modelData
property.
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
You can dynamically append and remove data from the ListModel, and the Repeater will automatically make those changes. However, simply changing a specific item from either the Repeater or ListModel does not affect the other, and requires the changing of both, unless something like QAbstractListModel is used. See Example Application for more information.Aplicación de ejemplo
La aplicación de ejemplo siguiente muestra cómo se pueden usar chips en programas como listas de tareas pendientes.
|
|