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
is better suited for larger models.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")
}
}
}
}
}