Targetes (Card)
Els tipus
Kirigami.AbstractCard
i
Kirigami.Card
de Kirigami s’utilitzen per a implementar el popular component de targeta utilitzat en moltes plataformes mòbils i web. Les targetes es poden utilitzar per a mostrar una col·lecció amb informació o accions d’una manera atractiva i distintiva.
El Kirigami també ofereix 3 tipus de vistes i posicionadors per a ajudar-vos a presentar les vostres targetes amb disposicions belles i sensibles.
AbstractCard
Una
Kirigami.AbstractCard
és el tipus de targeta més senzilla. Només és un rectangle amb una ombra, el qual podrà contenir qualsevol element. També podrà tenir elements assignats a les seves propietats header o footer. En aquest cas, una
Kirigami.Heading
és la seva capçalera i un [Controls.Label]docs:qtquickcontrols;QtQuick.Controls.Label) amb wrapMode establert a Text.WordWrap és el contentItem de la targeta.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Targeta (Card)
Una
Kirigami.Card
hereta des de
Kirigami.AbstractCard
i proporciona més característiques a punt d’emprar. Una targeta té una capçalera composta per un bàner i un peu de pàgina compost per objectes
Kirigami.Action
juntament amb el seu contingut 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ítol es pot col·locar en el bàner
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}
CardsLayout
Una
Kirigami.CardsLayout
és més útil quan les targetes que es presenten no són instanciades per un model o per un model que sempre té molt pocs elements. Es presentaran com una quadrícula de dues columnes que romandran centrades si l’aplicació és realment ampla, o es convertiran en una sola columna si no hi ha prou espai per a dues columnes, com en la pantalla d’un telèfon mòbil.
Una «CardsLayout» sempre haurà d’estar continguda dins d’una «ColumnLayout».
De manera opcional, una targeta es pot orientar horitzontalment. En aquest cas, serà més ampla que alta i és més adequada per a col·locar-se en una ColumnLayout. Si heu de posar-la en una CardsLayout, de manera predeterminada tindreu un columnSpan de 2.
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
és una vista de llista que es pot utilitzar amb els components de
Kirigami.AbstractCard
.
Una Kirigami.CardsListView estendrà les targetes filles a la seva pròpia amplada. Per tant, aquest component només s’ha d’utilitzar amb les targetes que es vegin bé en qualsevol mida horitzontal. Es desaconsella l’ús del component Kirigami.Card, llevat que tingueu Qt.Horizontal com la seva propietat headerOrientation.
L’elecció entre utilitzar aquesta vista amb components Kirigami.AbstractCard o un ListView convencional amb components
AbstractListItem
/
BasicListItem
és purament estètic.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
// NOTA: No poseu mai una disposició com a contentItem, ja que provocarà bucles de vincle
contentItem: Item {
implicitWidth: delegateLayout.implicitWidth
implicitHeight: delegateLayout.implicitHeight
GridLayout {
id: delegateLayout
anchors {
left: parent.left
top: parent.top
right: parent.right
// IMPORTANT: no posar mai el marge 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
Utilitzeu una
Kirigami.CardsGridView
per a mostrar les targetes en una quadrícula.
El seu comportament és el mateix que una Kirigami.CardsLayout, i permet col·locar les targetes en una o dues columnes depenent de l’amplada disponible.
Una CardsGridView té la limitació que totes les targetes hauran de tenir la mateixa alçada exacta, de manera que cellHeight s’haurà d’establir manualment a un valor per al qual el contingut haurà de cabre per a cada targeta filla.
Si és possible, utilitzeu Kirigami.CardsGridView només quan necessiteu fer una instància de moltes targetes. Si només creeu una instància d’unes quantes targetes, en el seu lloc opteu per una Kirigami.CardsLayout amb un Repeater.
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
// Model amb els rols següents: text, accions i imatge
}
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
}
]
}
}
