Kort
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: "..."
}
}
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"
}
}
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"
}
}
}
}
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")
}
}
}
}
}
CardsGridView
Använd en Kirigami.CardsGridView för att visa kort i ett rutnät.
Dess beteende är likadant som 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 CardsGridView när du behöver instansiera många kort. Om du bara ska instansiera några få kort, välj hellre CardsLayout med en Repeater istället.
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
}
]
}
}
