Cartes
Les types de Kirigami « Kirigami.AbstractCard » et « Kirigami.Card » sont utilisés pour implémenter le composant populaire de carte, utilisé sur de nombreuses plate-formes mobiles et Internet. Les cartes peuvent être utilisées pour afficher un ensemble d’informations ou d’actions d’une manière attrayante et distinctive.
Kirigami propose également 3 types de vues et de positionneurs pour vous aider à présenter vos cartes selon des mises en page belles et réactives.
AbstractCard
Une carte « Kirigami.AbstractCard » est le type de carte le plus simple. C’est juste un rectangle avec une ombre, pouvant contenir n’importe quel « Item ». Elle peut aussi avoir des éléments associés à ses propriétés « header » ou « footer ». Dans ce cas, un objet « Kirigami.Heading » représente son en-tête et un objet « Controls.Label » en mode « wrapMode » positionné à « Text.WordWrap » représente le « contenu » de la carte.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Carte
Un objet « Kirigami.Card » hérite de l’objet « Kirigami.AbstractCard » et fournit plus de fonctionnalités de façon intégrée. Une carte possède une en-tête composée d’un objet « banner » et d’un pied de page composé d’objets « Kirigami.Action » à côté de son contenu 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"
// Le titre peut être positionné dans l'en-tête.
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}
Dispositions des cartes
Un objet « Kirigami.CardsLayout » est plus utile lorsque les cartes présentées ne sont pas instanciées par un modèle ou par un modèle qui possède toujours très peu d’éléments. Les cartes sont présentées sous la forme d’une grille de deux colonnes qui restera centrée si l’application est vraiment large ou passera sous une seule colonne s’il n’y a pas assez de place pour deux colonnes, comme sur l’écran d’un téléphone portable.
Un « CardsLayout » doit toujours être contenu dans un « ColumnLayout ».
Une carte peut éventuellement être orientée horizontalement. Dans ce cas, elle sera plus large que haute et elle sera mieux adaptée pour être placée dans une disposition « ColumnLayout ». Si vous devez la placer dans un « CardsLayout », elle aura une propriété « columnSpan » de valeur 2 par défaut.
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
Une « Kirigami.CardsListView » est un affichage en liste pouvant être utilisé avec des composants « Kirigami.AbstractCard » .
Un objet « Kirigami.CardsListView » va étirer les cartes fils selon sa propre largeur. Ce composant ne doit donc être utilisé qu’avec des cartes ayant une apparence correcte quel que soit leur taille horizontale. Il est déconseillé d’utiliser un objet « Kirigami.CardsListView » avec le composant « Kirigami.Card », sauf s’il a une valeur « Qt.Horizontal » comme propriété « headerOrientation ».
Le choix entre l’utilisation de cet affichage avec les composants « Kirigami.AbstractCard » ou de d’un objet conventionnel « ListView » avec des composants « AbstractListItem » / BasicListItem est purement un choix d’esthétique.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
// REMARQUE : ne jamais mettre un objet « Layout » comme « contentItem » car cela
// provoquerait des boucles imbriquées.
contentItem: Item {
implicitWidth: delegateLayout.implicitWidth
implicitHeight: delegateLayout.implicitHeight
GridLayout {
id: delegateLayout
anchors {
left: parent.left
top: parent.top
right: parent.right
// IMPORTANT : ne jamais installer de marge en bas
}
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
Utilisez un objet « Kirigami.CardsGridView » pour afficher des cartes dans une grille.
Son comportement est le même que celui de la propriété « Kirigami.CardsLayout ». Il permet de placer des cartes sur une ou deux colonnes en fonction de la largeur disponible.
L’objet « CardsGridView » présente une limitation puisque chaque carte doit avoir exactement la même hauteur, donc la propriété « cellHeight » doit être manuellement définie avec une valeur selon laquelle le contenu doit s’adapter pour chaque carte fils.
Si possible, n’utilisez « Kirigami.CardsGridView » que lorsque vous avez besoin d’instancier de nombreuses cartes. Si vous n’avez l’intention d’instancier que quelques cartes, optez plutôt pour un module « Kirigami.CardsLayout » avec un objet « Repeater ».
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
// Modèle avec les rôles suivants : texte, actions et image
}
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
}
]
}
}