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
. Ĉi-kaze
Kirigami.Heading
estas ĝia kapo kaj
Controls.Label
estas la
contentItem
de la karto; QtQuick.Controls.Item::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.
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")
}
}
}
}
}
CardsGridView
Uzu Kirigami.CardsGridView por montri kartojn en krado.
Ĝia konduto estas sama kiel CardsLayout , kaj ĝi permesas kartojn esti enmetitaj en unu aŭ du kolumnoj depende de la disponebla larĝo.
CardsGridView havas la limigon, ke ĉiu karto devas havi la saman precizan altecon, do [cellHeight](https://doc.qt.io/qt-6/qml-qtquick-gridview.html# cellHeight-prop) devas esti mane agordita al valoro por kiu la enhavo devas konveni por ĉiu infankarto.
Se eble uzu CardsGridView nur kiam vi bezonas krei multajn kartojn. Se vi nur instanciigos kelkajn kartojn, elektu CardsLayout kun Ripetilo anstataŭe.
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
// Modelo kun la sekvaj roloj: teksto, agoj kaj bildo
}
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
}
]
}
}