Cards

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

Kirigami-typerna Kirigami.AbstractCard och Kirigami.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 (Item) 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 (docs:qtquickcontrols;QtQuick.Controls.Label) med wrapMode inställd till Text.WordWrap ä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

Card

Ett Kirigami.Card ärver från Kirigami.AbstractCard och tillhandahåller fler funktioner från början. Ett kort har ett sidhuvud som består av en banner och en sidfot som består av Kirigami.Action objekt tillsammans med huvudinnehå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"
    }
}

CardsLayout

En Kirigami.CardsLayout är användbarast när korten som presenteras inte instansieras av en modell eller 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.

En CardsLayout ska alltid finnas inuti en ColumnLayout.

Ett kort kan valfritt orienteras horisontellt. I så fall är det bredare än högt, och är bättre ämnat att placeras i en kolumnlayout. Om du måste placera det i en kortlayout har det förvald columnSpan 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

CardsListView

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

En Kirigami.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. Vid användning av en Kirigami.CardsListView avråds från komponenten Kirigami.Card, om den inte har Qt.Horizontal som sin headerOrientation egenskap.

Valet mellan användning av vyn med Kirigami.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

CardsGridView

Använd en Kirigami.CardsGridView för att visa kort i ett rutnät.

Dess beteende är likadant som Kirigami.CardsLayout, och den tillåter att kort placeras i en eller två kolumner beroende på tillgänglig bredd.

CardsGridView har begränsningen att alla kort måste ha exakt samma höjd, så cellHeight måste ställas in manuellt till ett värde där innehållet i alla underliggande kort får plats.

Använd om möjligt bara Kirigami.CardsGridView när du behöver instansiera många kort. Om du bara ska instansiera några få kort, välj hellre Kirigami.CardsLayout med en Repeater.

Kirigami.CardsGridView {
    id: view
    model: ListModel {
        id: mainModel
        // Modell med följande roller: text, åtgärder och bild
    }
    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
            }
        ]
    }
}
Skärmbild av en CardsGridView