Kaarten

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

De Kirigami typen AbstractCard en 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 zijnheaderen een Controls.Label 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 AbstractCard en levert standaard meer mogelijkheden. Cards erven dezelfde header en footer uit een Abstract Card, maar u wordt aangemoedigd om een banner te gebruiken en in plaats daarvan een set Kirigami.Action in de groep actions.

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

Schermafdruk van een volwaardige kaart met een bannerachergrond achter zijn titel, witte achtergrond achter zijn tekst en twee acties met pictogrammen en een hamburgermenu onderaan

CardsLayout

Een Kirigami.CardsLayout is het meest nuttig wanneer de gepresenteerde kaarten ofwel 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

CardsListView is meer geschikt voor grotere modellen.

Belangrijk

Een CardsLayout zou zich altijd binnen een ColumnLayout moeten 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 maximumColumns 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"
            }
        }
    }
}

Schermafdruk van een CardsLayout die twee kaarten naast elkaar in oriëntatie portret bovenaan een kaart in oriëntatie landschap toont, allen met verschillende in gebruik zijnde componenten

CardsListView

Een Kirigami.CardsListView is een lijstweergave die gebruikt kan worden met componenten AbstractCard .

Een 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 de component Card erin wordt ontraden, tenzij het Qt.Horizontal heeft als zijn eigenschap [headerOrientation]docs:kirigami2;templates::AbstractCard::headerOrientation).

De keuze tussen deze weergave gebruiken met componenten 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")
                }
            }
        }
    }
}

Schermafdruk van een CardsListView, wat een eenvoudige lijst met cards is in modus landschap

Schuifbare pagina's en lijstweergaven

Schuifladen