Schede
I tipi Kirigami AbstractCard e Card vengono utilizzati per implementare il popolare componente card utilizzato su molte piattaforme mobili e web. Le schede possono essere utilizzate per visualizzare una raccolta di informazioni o azioni in modo attraente e distintivo.
Kirigami offre anche 3 tipi di visualizzazioni e posizionatori per aiutarti a presentare le tue schede con layout belli e reattivi.
AbstractCard
Una Kirigami.AbstractCard è il tipo di scheda più semplice. È semplicemente un rettangolo con un'ombra, che può contenere qualsiasi Elemento al suo interno. Può anche avere elementi assegnati alle sue proprietà header o footer. In questo caso un Kirigami.Heading è la sua intestazione e un Controls.Label è l'intestazione della carta contentItem.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Scheda
Una Kirigami.Card eredita da AbstractCard e fornisce più funzionalità pronte all'uso. Le schede ereditano la stessa intestazione e piè di pagina da una scheda astratta, ma sei incoraggiato a utilizzare una banner e un set di Kirigami.Action nel gruppo azioni.
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"
// Il titolo può essere posizionato nello striscione
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}
CardsLayout
Un Kirigami.CardsLayout è molto utile quando le schede presentate non sono istanziate da un modello o sono istanziate da un modello che ha sempre pochissimi elementi. Si presentano come una griglia di due colonne che rimarrà centrata se l'applicazione è molto ampia, oppure diventerà una colonna unica se non c'è abbastanza spazio per due colonne, come lo schermo di un cellulare.
Nota
CardsListView è più adatto per i modelli più grandi.Facoltativamente una scheda può essere orientata orizzontalmente. In questo caso sarà più largo che alto ed è più adatto a essere posizionato in un ColumnLayout. Se devi inserirlo in un CardsLayout, avrà un maximumColumns di "2" per impostazione predefinita.
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 è una visualizzazione elenco che può essere utilizzata con i componenti AbstractCard.
Un CardsListView allungherà le schede secondarie alla propria larghezza. Questo componente dovrebbe quindi essere utilizzato solo con schede che abbiano un bell'aspetto a qualsiasi dimensione orizzontale. L'uso di un componente Card al suo interno è sconsigliato, a meno che non abbia Qt.Horizontal come proprietà headerOrientation.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
//NOTA: non inserire mai un Layout come contentItem poiché causerebbe loop di associazione
contentItem: Item {
implicitWidth: delegateLayout.implicitWidth
implicitHeight: delegateLayout.implicitHeight
GridLayout {
id: delegateLayout
anchors {
left: parent.left
top: parent.top
right: parent.right
//IMPORTANTE: non mettergli mai il margine inferiore
}
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")
}
}
}
}
}