Kaarten

Een kaart dient als overzicht en ingang voor meer gedetailleerde informatie en kan directe toegang bieden tot de meest belangrijke acties op een item.

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.

Notitie

Kirigami.CardsListView or Kirigami.CardsGridView are better suited for larger models.

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
            }
        ]
    }
}

Schuifbare pagina's en lijstweergaven

Schuifladen