Tarjetas
Los tipos de Kirigami
Kirigami.AbstractCard
y
Kirigami.Card
se usan para implementar el popular componente de tarjeta que se usa en muchas plataformas móviles y web. Las tarjetas se pueden usar para mostrar una recopilación de información o acciones de una forma atractiva y distintiva.
Kirigami también ofrece tres tipos de vistas y posicionadores para ayudarle a presentar tarjetas con diseños agradables y receptivos.
AbstractCard
Una
Kirigami.AbstractCard
es el tipo más sencillo de tarjeta. Solo es un rectángulo con una sombra que puede contener cualquier Item en su interior. También puede tener elementos asignados a sus propiedades header y footer. En este caso, una
Kirigami.Heading
es la cabecera y una
Controls.Label
con wrapMode definido a Text.WordWrap es el contentItem de la tarjeta.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Card
Una
Kirigami.Card
hereda de
Kirigami.AbstractCard
y proporciona más funcionalidades listas para usar. Una tarjeta tiene una cabecera compuesta por un banner y un pie compuesto de objetos
Kirigami.Action
junto a su contenido principal.
Kirigami.Card {
actions: [
Kirigami.Action {
text: qsTr("Action1")
icon.name: "add-placemark"
},
Kirigami.Action {
text: qsTr("Action2")
icon.name: "address-book-new-symbolic"
},
// ...
]
banner {
source: "../banner.jpg"
title: "Title Alignment"
// El título se puede situar en el *banner*
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}
CardsLayout
Un
Kirigami.CardsLayout
es más útil cuando las tarjetas que se presentan no están instanciadas por un modelo o por un modelo que siempre tiene muy pocos elementos. Se presentan como una cuadrícula de dos columnas que permanecerán centradas si la aplicación es realmente ancha, o se convertirán en una sola columna si no hay suficiente espacio para dos columnas, como la pantalla de un teléfono móvil.
Un CardsLayout siempre debe estar contenido dentro de un ColumnLayout.
De forma opcional, una tarjeta se puede orientar horizontalmente. En este caso, será más ancha que alta, que es más adecuado para colocarla en un ColumnLayout. Si debe ponerla en un CardsLayout, tendrá un columnSpan de 2 de forma predeterminada.
ColumnLayout {
Kirigami.CardsLayout {
Kirigami.Card {
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text2"
}
}
Kirigami.AbstractCard {
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}
Kirigami.Card {
headerOrientation: Qt.Horizontal
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text2"
}
}
}
}
CardsListView
Una
Kirigami.CardsListView
es una vista de lista que se puede usar con componentes
Kirigami.AbstractCard
.
Una Kirigami.CardsListView estirará las tarjetas hijas a su propia anchura. Por ello, este componente solo se debe usar con tarjetas que se vean bien con cualquier tamaño horizontal. Al usar una Kirigami.CardsListView se desaconseja el uso del componente Kirigami.Card, excepto si tiene el valor Qt.Horizontal en la propiedad headerOrientation.
La elección entre usar esta vista con componentes Kirigami.AbstractCard o una ListView convencional con componentes
AbstractListItem
/
BasicListItem
es solo una cuestión de estética.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
// NOTA: no usar nunca un Layout como contentItem, ya que puede provocar bucles de enlace.
contentItem: Item {
implicitWidth: delegateLayout.implicitWidth
implicitHeight: delegateLayout.implicitHeight
GridLayout {
id: delegateLayout
anchors {
left: parent.left
top: parent.top
right: parent.right
// IMPORTANTE: no colocar nunca el margen inferior
}
rowSpacing: Kirigami.Units.largeSpacing
columnSpacing: Kirigami.Units.largeSpacing
columns: width > Kirigami.Units.gridUnit * 20 ? 4 : 2
Kirigami.Icon {
source: "applications-graphics"
Layout.fillHeight: true
Layout.maximumHeight: Kirigami.Units.iconSizes.huge
Layout.preferredWidth: height
}
Kirigami.Heading {
level: 2
text: qsTr("Product ")+ modelData
}
Controls.Button {
Layout.alignment: Qt.AlignRight
Layout.columnSpan: 2
text: qsTr("Install")
}
}
}
}
}
CardsGridView
Use un
Kirigami.CardsGridView
para mostrar tarjetas en una cuadrícula.
Su comportamiento es el mismo que el de Kirigami.CardsLayout, y permite situar tarjetas en una o dos columnas según la anchura disponible.
CardsGridView tiene la limitación de que cada tarjeta debe tener exactamente la misma altura, por lo que debe definir manualmente cellHeight a un valor para que quepa el contenido de cada tarjeta hija.
Si es posible, use Kirigami.CardsGridView solo cuando necesite instanciar muchas tarjetas. Si solo va a instanciar unas cuantas tarjetas, opte por una Kirigami.CardsLayout con un Repeater.
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
// Modelo con los siguientes roles: texto, acciones e imagen
}
delegate:Kirigami.Card {
id: card
banner {
title: model.title
source: model.image
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: model.text
}
actions: [
Kirigami.Action {
text: model.actions.get(0).text
icon.name: model.actions.get(0).icon
},
Kirigami.Action {
text: model.actions.get(1).text
icon.name: model.actions.get(1).icon
}
]
}
}
