Kartice

Kartica služi kot pregled in vstopna točka za podrobnejše informacije in lahko nudi neposreden dostop do najpomembnejših dejanj na postavki.

Tipi Kirigami AbstractCard and Card se uporabljajo za izvajanje priljubljene komponente kartic, uporabljene na številnih mobilnih in spletnih platformah. Kartice se lahko uporabljajo za prikaz zbirke informacij ali dejanj na privlačen in razločen način.

Kirigami vam nudi tudi 3 vrste pogledov views in pozicionerjev positioners, ki vam bodo v pomoč pri predstavitvi vaših kartic z lepimi in odzivnimi postavitvami.

AbstractCard

Kirigami.AbstractCard je najenostavnejši tip kartice. To je samo pravokotnik s senco, ki lahko vsebuje katerokoli postavko Item v njem. Lahko ima tudi postavke, dodeljene lastnostim header ali footer . V tem primeru je njegova glava Kirigami.Heading oznaka kontrole Controls.Label vsebine kartice contentItem .

Kirigami.AbstractCard {
    Layout.fillHeight: true
    header: Kirigami.Heading {
        text: qsTr("AbstractCard")
        level: 2
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "..."
    }
}

Posnetek zaslona Abstraktne kartice s preprostim pravokotnim gumbom in levo poravnanim besedilom

Kartica

Kirigami.Card deduje od AbstractCard in neposredno nudi več zmožnosti. Kartice dedujejo isto glavo header in nogo footer iz abstraktne kartice, ampak spodbujamo rabo pasice banner iz zbirko Kirigami.Action namesto skupine 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"
        // Naslov je mogoče umestiti v pasico
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

Posnetek zaslona polno opremljene kartice z naslovom pasice za naslovom, belim ozadjem za besedilom in dvema dejanjema z ikonami in hamburger menijem na dnu

CardsLayout

Kirigami.CardsLayout je najbolj uporabna, če kartice, ki so predstavljene, niso v opredmetene z modelom ali z modelom, ki ima vedno zelo malo predmetov. Predstavljeni so kot mreža dveh stolpcev, ki bosta ostala usredinjena, če je aplikacija res široka ali pa postaneta en sam stolpec, če ni dovolj prostora za dva stolpca, kot je npr. na zaslonu mobilnega telefona.

Opomba

CardsListView ali CardsGridView sta bolje prilagojena za večje modele.

Pomembno

CardsLayout morajo biti vedno vsebovani v postavitvi ColumnLayout.

Kartica je lahko po želji usmerjena vodoravno. V tem primeru bo širša kot višja in je bolj primerna za postavitev v postavitev stolpcev ColumnLayout. Če jo morate dati v postavitev kartic CardsLayout , bo privzeto imela največ 2 stolpca maximumColumns .

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

Zajem zaslona postavitve kartic, ki prikazuje dve pokončni kartici strani ob strani na vrhu ležeče kartice, vse z uporabljenimi različnimi komponentami

CardsListView

Kirigami.CardsListView je pogled seznama, ki ga lahko uporabljate s komponentami AbstractCard .

CardsListView bo raztegnil otroške kartice na lastno širino. To komponento se zato sme uporabiti samo s karticami, ki bodo dobro videti v kateri koli vodoravni velikosti. Uporaba komponente Card znotraj odsvetujemo, razen če ima orientacijo Qt.Horizontal kot lastnost glave headerOrientation .

Izbira med uporabo tega pogleda s komponentami AbstractCard ali običajnim pogledom ListView s komponentami AbstractListItem / BasicListItem je zgolj estetska.

Kirigami.CardsListView {
    id: view
    model: 100

    delegate: Kirigami.AbstractCard {
        //OPOMBA: nikoli ne postavite postavitve Layout kot vsebino v contentItem, saj bo povzročil
        //zavezujoče zanke
        contentItem: Item {
            implicitWidth: delegateLayout.implicitWidth
            implicitHeight: delegateLayout.implicitHeight
            GridLayout {
                id: delegateLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                    //POMEMBNO: nikoli ne nastavite spodnjega roba
                }
                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")
                }
            }
        }
    }
}

Posnetek zaslona CardsListView, ki je enostavni navpični seznam kartic v ležečem načinu

CardsGridView

Uporabite Kirigami.CardsGridView za prikaz kartic v mreži.

Njegovo vedenje je enako kot CardsLayout in omogoča, da se kartice postavijo v enem ali dveh stolpcih, odvisno od razpoložljive širine.

CardsGridView ima omejitev, da mora imeti vsaka kartica natančno enako višino, zato mora biti cellHeight ročno nastavljena vrednost, za katero mora biti vsebina primerna za vsako otroško kartico.

Če je mogoče, uporabite CardsGridView samo, če morate vzpostaviti veliko kartic. Če želite samo vnašati nekaj kartic, se raje odločite za CardsLayout s ponovitvijo Repeater .

Kirigami.CardsGridView {
    id: view
    model: ListModel {
        id: mainModel
        // Model z naslednjimi vlogami: besedilo, dejanja in slika
    }
    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
            }
        ]
    }
}

Posnetek zaslona CardsGridView, kjer vsaka kartica zaseda enako količino prostora v omrežju

Drseče strani in pogledi seznama

Predali