Kaarten
De Kirigami typen
Kirigami.AbstractCard
en
Kirigami.Card
worden gebruikt om de populaire kaartcomponent gebruikt op vele mobiele en webplatforms te implementeren. Kaarten kunnen gebruikt worden om een hoeveelheid information of acties op een attractieve en kenmerkende manier te tonen.
Kirigami biedt ook 3 soorten weergaven en positioneerders om u te helpen bij het presenteren van uw kaarten met mooie en responsieve indelingen.
AbstractCard
Een
Kirigami.AbstractCard
is het eenvoudigste type kaart. Het is gewoon een rechthoek met een schaduw, die elk Item
erin kan bevatten. Het kan ook items aan zijn eigenschappen header
of footer
toekennen. In dat geval is een
Kirigami.Heading
zijn kop en een
Controls.Label
met wrapMode
ingesteld op Text.WordWrap
is het contentItem
van de kaart.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}

Kaart
Een
Kirigami.Card
erft van
Kirigami.AbstractCard
en levert standaard meer mogelijkheden. Een kaart heeft een kop opgemaakt uit een banner
en een footer opgemaakt uit objecten
Kirigami.Action
naast zijn hoofdinhoud.
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"
// De titel kan gepositioneerd worden in de banner
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}

CardsLayout
Een
Kirigami.CardsLayout
is het meest nuttig wanneer de gepresenteerde kaarten niet door een model worden gemaakt of door een model dat altijd erg weinig items heeft. Ze worden gepresenteerd als een raster met twee kolommen die gecentreerd zullen blijven als de toepassing echt breed is of een enkele kolom wordt als er niet genoeg ruimte is voor twee kolommen, zoals het scherm van een mobiele telefoon.
Een CardsLayout zou zich altijd binnen een ColumnLayout moten bevinden.
Een kaart kan optioneel horizontaal georiënteerd zijn. In dat geval zal het breder zijn dan hoog en is het beter geschikt om geplaatst te worden in een ColumnLayout. Als u het in een CardsLayout moet plaatsen, zal het standaard een columnSpan van 2 hebben.
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
Een
Kirigami.CardsListView
is een lijstweergave die gebruikt kan worden met componenten
Kirigami.AbstractCard
.
Een Kirigami.CardsListView
zal kindkaarten uitrekken naar zijn eigen breedte. Deze component zou daarom alleen gebruikt moeten worden met kaarten die er goed uitzien in elke horizontale grootte. Met gebruik van Kirigami.CardsListView
wordt de component Kirigami.Card
ontraden, tenzij het Qt.Horizontal
heeft als zijn eigenschap headerOrientation
.
De keuze tussen deze weergave gebruiken met componenten Kirigami.AbstractCard
of een conventionele ListView
met componenten
AbstractListItem
/
BasicListItem
is puur een esthetische.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
// OPMERKING: zet nooit een Layout als contentItem omdat het bindinglussen zal veroorzaken
contentItem: Item {
implicitWidth: delegateLayout.implicitWidth
implicitHeight: delegateLayout.implicitHeight
GridLayout {
id: delegateLayout
anchors {
left: parent.left
top: parent.top
right: parent.right
// BELANGRIJK: zet nooit de ondermarge
}
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
Een
Kirigami.CardsGridView
gebruiken om kaarten in een raster te gebruiken.
Zijn gedrag is hetzelfde als een Kirigami.CardsLayout
en het biedt kaarten om in een of twee kolommen te plaatsen afhankelijk van de beschikbare breedte.
CardsGridView heeft de beperking dat elke kaart exact dezelfde hoogte moet hebben, dus cellHeight
moet handmatig gezet worden op een waarde waarbij de inhoud moet passen voor elke kindkaart.
Indien mogelijk Kirigami.CardsGridView
alleen gebruiken wanneer u van veel kaarten een exemplaar moet maken. Als u dat gaat doen voor een paar kaarten, kies in plaats daarvan dan voor een Kirigami.CardsLayout
met een Repeater
.
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
// Model met de volgende rollen: tekst, acties en afbeelding
}
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
}
]
}
}
