Kartice
Tipi KirigamiAbstractCard 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
Kartica Kirigami.AbstractCard je najpreprostejša vrsta kartice. Gre za pravokotnik s senco, ki lahko vsebuje kateri koli Predmet. Predmeti so lahko dodeljeni tudi lastnostim header ali footer. V tem primeru je Kirigami.Heading njegov header in Controls.Label je contentItem kartice.
Kirigami.AbstractCard { Layout.fillHeight: true header: Kirigami.Heading { text: qsTr("AbstractCard") level: 2 } contentItem: Controls.Label { wrapMode: Text.WordWrap text: "..." } }
Kartica
Datoteka Kirigami.Card deduje od datoteke AbstractCard in ponuja več funkcij takoj po namestitvi. Kartice podedujejo isti header in footer od abstraktne kartice, vendar priporočamo, da namesto tega uporabite pasico banner in niz dejanj Kirigami.Action v skupini 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" } }
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 je bolje prilagojen za večje modele.Kartica je lahko po želji usmerjena vodoravno. V tem primeru bo širša kot višja in je bolj primerna za postavitev v ColumnLayout. Če jo morate postaviti v CardsLayout, bo imela privzeto maximumColumns vrednost 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" } } } }
CardsListView
Kirigami.CardsListView je pogled seznama, ki ga lahko uporabljate s komponentami AbstractCard.
Komponenta CardsListView bo raztegnila podrejene kartice na svojo širino. Zato naj bi se ta komponenta uporabljala le s karticami, ki bodo videti dobro pri kateri koli vodoravni velikosti. Uporaba komponente Card v njej ni priporočljiva, razen če ima lastnost headerOrientation Qt.Horizontal.
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") } } } } }