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