Tarjetas
Los tipos de Kirigami AbstractCard y 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
A
Kirigami.AbstractCard
is the simplest type of card. It's just a rectangle with a shadow, which can contain any
Item
in it. It can also have Items assigned to its
header
or
footer
properties. In this case a
Kirigami.Heading
is its header and a
Controls.Label
is the card's
contentItem
.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Card
A
Kirigami.Card
inherits from
AbstractCard
and provides more features out of the box. Cards inherit the same
header
and
footer
from an Abstract Card, but you are encouraged to use a
banner
and a set of
Kirigami.Action
in the actions group instead.
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
A Kirigami.CardsLayout is most useful when the cards being presented are either not instantiated by a model or are instantiated by a model that always has very few items. They are presented as a grid of two columns which will remain centered if the application is really wide, or become a single column if there is not enough space for two columns, such as a mobile phone screen.
A card can optionally be oriented horizontally. In this case it will be wider than tall, and is better suited to being placed in a ColumnLayout. If you must put it in a
CardsLayout
, it will have a
maximumColumns
of 2 by default.
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 AbstractCard .
A CardsListView will stretch child cards to its own width. This component should therefore only be used with cards which will look good at any horizontal size. Use of a Card component inside it is discouraged, unless it has Qt.Horizontal as its headerOrientation property.
La elección entre usar esta vista con componentes 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 una 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 CardsGridView solo cuando necesite crear instancias de muchas tarjetas. Si solo va a crear instancias de unas pocas tarjetas, opte por una 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
}
]
}
}
