Kort

Ett kort (card) fungerar som en översikt och startpunkt för mer detaljerad information, och kan erbjuda direkt åtkomst till de viktigaste åtgärderna för ett objekt.

Kirigami-typerna AbstractCard och Card används för att implementera den populära komponenten card som används av många mobil- och webbplattformar. Kort kan användas för att visa samlad information eller samlade åtgärder på ett attraktivt och distinkt sätt.

Kirigami erbjuder också tre sorters vyer och positioneringsobjekt för att hjälpa dig presentera kort med vackra och mottagliga layouter.

AbstractCard

Ett Kirigami.AbstractCard är den enklaste sortens kort. Det är bara en rektangel med en skugga, som kan innehålla vilket objekt som helst. Det kan också ha objekt tilldelade till dess header eller footer egenskaper. I detta fall är Kirigami.Heading dess sidhuvud och Controls.Label är kortets contentItem.

Kirigami.AbstractCard {
    Layout.fillHeight: true
    header: Kirigami.Heading {
        text: qsTr("AbstractCard")
        level: 2
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "..."
    }
}
Skärmbild av ett Abstract Card, en enkelt rektangulär knapp med vänsterjusterad text

Card

Ett Kirigami.Card ärver från AbstractCard och tillhandahåller fler funktioner från början. Ett kort ärver samma header and footer från ett abstrakt kort, men du uppmuntras att använda en banner och en uppsättning Kirigami.Action i gruppen actions istället.

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"
        // Titeln kan placeras i baneret
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}
Skärmbild av ett fullfjädrat kort med en baner i bakgrunden bakom titeln, vit bakgrund bakom texten och två åtgärder med ikoner och en hamburgermeny längst ner

CardsLayout

En Kirigami.CardsLayout är användbarast när korten som presenteras antingen inte instansieras av en modell eller instansieras av en modell som alltid har mycket få objekt. De presenteras som ett rutnät med två kolumner som förblir centrerade om programmet är mycket brett, eller blir en enda kolumn om det inte finns tillräckligt med utrymme för två kolumner, såsom på en mobiltelefonskärm.

Ett kort kan valfritt orienteras horisontellt. I så fall är det bredare än högt, och är bättre ämnat att placeras i en ColumnLayout. Om du måste placera det i en CardsLayout har det förvald maximumColumns av 2.

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"
            }
        }
    }
}
Skärmbild av en CardsLayout som visar två kort sida vid sida i stående orientering ovanpå ett kort i liggande orientering, alla med olika komponenter använda

CardsListView

En Kirigami.CardsListView är en listvy som kan användas med AbstractCard komponenter.

En CardsListView sträcker ut underliggande kort till sin egen bredd. Komponenten bör därför bara användas med kort som ser bra ut med vilken horisontell storlek som helst. Användning av komponenten kort avråds från, om den inte har Qt.Horizontal som sin headerOrientation egenskap.

Valet mellan användning av vyn med AbstractCard -komponenter eller en konventionell ListView med AbstractListItem / BasicListItem -komponenter är rent estetiskt.

Kirigami.CardsListView {
    id: view
    model: 100

    delegate: Kirigami.AbstractCard {
        //Observera: använd aldrig Layout som contentItem eftersom det orsakar bindningssnurror
        contentItem: Item {
            implicitWidth: delegateLayout.implicitWidth
            implicitHeight: delegateLayout.implicitHeight
            GridLayout {
                id: delegateLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                    //Viktigt: ange aldrig undre marginal
                }
                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")
                }
            }
        }
    }
}

Skärmbild av en CardsListView, som är en enkel vertikal lista med kort i liggande orientering