Cartes

Une carte sert de vue d’ensemble et de point d’entrée pour des informations plus détaillées . Elle peut offrir un accès direct aux actions les plus importantes sur un élément.

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: "..."
    }
}
Copie d’écran d’une carte abstraite

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"
            }
        }
    }
}
Copie d’écran d’une disposition de cartes

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")
                }
            }
        }
    }
}
Copie d’écran de l’affichage de cartes en grille

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
            }
        ]
    }
}
Copie d’écran de l’affichage de cartes en grille