Kartoj
La Kirigami-tipoj AbstractCard kaj Karto estas uzataj por efektivigi la popularan kartkomponenton uzatan en multaj moveblaj kaj retplatformoj. Kartoj povas esti uzataj por montri kolekton de informoj aŭ agoj laŭ alloga kaj karakteriza maniero.
Kirigami ankaŭ ofertas 3 specojn de vidoj kaj [poziciantoj](https://doc.qt.io/qt-6 /qtquick-positioning-layouts.html) por helpi vin prezenti viajn kartojn kun belaj kaj respondemaj aranĝoj.
Abstrakta Karto
Kirigami.AbstractCard estas la plej simpla tipo de karto. Ĝi estas nur rektangulo kun ombro, kiu povas enhavi ajnan Item en ĝi. Ĝi ankaŭ povas havi Erojn asignitajn al siaj header aŭ footer. En ĉi tiu kazo Kirigami.Heading estas ĝia kapo kaj Controls.Label estas la contentItem.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Karto
Kirigami.Karto heredas de AbstractCard kaj disponigas pliajn funkciojn el la skatolo. Kartoj heredas la saman header kaj footer de Abstrakta Karto, sed vi estas kuraĝigitaj uzi standardo kaj aro de Kirigami.Action en la grupo agoj anstataŭe.
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"
// La titolo povas esti poziciigita en la standardon
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}CardsLayout
Kirigami.CardsLayout estas plej utila kiam la prezentitaj kartoj estas aŭ ne instancigitaj de modelo aŭ estas instancigitaj de modelo kiu ĉiam havas tre malmultajn erojn. Ili estas prezentitaj kiel krado de du kolumnoj, kiuj restos centritaj se la aplikaĵo estas vere larĝa, aŭ fariĝos ununura kolumno se ne estas sufiĉe da spaco por du kolumnoj, kiel ekrano de poŝtelefono.
Noto
CardsListView estas pli taŭga por pli grandaj modeloj.Karto povas laŭvole esti orientita horizontale. En ĉi tiu kazo ĝi estos pli larĝa ol alta, kaj pli taŭgas por esti metita en ColumnLayout. Se vi devas meti ĝin en CardsLayout, ĝi havos maximumColumns de 2 defaŭlte.
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"
}
}
}
}
KartojListView
Kirigami.CardsListView estas listvido uzebla kun AbstractCard komponantoj.
CardsListView etendos infanajn kartojn al sia propra larĝo. Ĉi tiu komponanto devus esti uzata nur kun kartoj, kiuj aspektos bone je ajna horizontala grandeco. Uzo de Karto komponanto ene de ĝi estas malinstigita, krom se ĝi havas Qt.Horizontal kiel sia [headerOrientation](docs:kirigami2;ŝablonoj:: AbstractCard::headerOrientation) proprieto.
La elekto inter uzi ĉi tiun vidon kun AbstractCard komponantoj aŭ konvencia ListView kun AbstractListItem/[BasicListItem] :kirigami2;BasicListItem) komponantoj estas nur estetika.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
//NOTO: neniam metu Aranĝon kiel enhavItem ĉar ĝi kaŭzos ligajn buklojn
contentItem: Item {
implicitWidth: delegateLayout.implicitWidth
implicitHeight: delegateLayout.implicitHeight
GridLayout {
id: delegateLayout
anchors {
left: parent.left
top: parent.top
right: parent.right
//GRAVA: neniam metu la malsupran marĝenon
}
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")
}
}
}
}
}