Karty
Rodzaje Kirigami
Kirigami.AbstractCard
oraz
Kirigami.Card
są używane, aby zaimplementować powszechne składniki kart używane na wielu platformach sieciowych i przenośnych. Kart można używać do wyświetlania zbiorów informacji lub działań w ładny i wyraźny sposób.
Kirigami daje także 3 rodzaje widoków i rzeczy umieszczających, aby pomóc w przedstawianiu kart przy użyciu pięknych i łatwo obsługiwalnych układów.
Abstrakcyjna karta
Kirigami.AbstractCard
jest najprostszym rodzajem karty. Jest to tylko prostokąt z cieniem, który może w sobie zawierać dowolną Item. Może także mieć przypisane rzeczy do swoich właściwości header lub footer. W tym przypadku
Kirigami.Heading
jest jego nagłówkiem a
Controls.Label
z wrapMode ustawionym na Text.WordWrap jest contentItem karty.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Karta
Kirigami.Card
dziedziczy z
Kirigami.AbstractCard
i domyślnie daje więcej możliwości. Karta ma nagłówek składający się z banner oraz nagłówka składającego się z obiektu
Kirigami.Action
obok swojego głównego składnika.
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"
// Tytuł można umieścić na banerze
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}
CardsLayout
Kirigami.CardsLayout
jest najbardziej użyteczny, gdy przedstawiane karty nie są tworzone przez model lub przez model, który zawsze zawiera niewiele rzeczy. Są przedstawiane jako siatka dwóch kolumn, które pozostaną wyśrodkowane, jeśli aplikacja jest na prawdę szeroka, lub staną się pojedynczą kolumną, jeśli nie ma miejsca na dwie kolumny, tak jak w przypadku ekranów telefonów.
CardsLayout powinien zawsze znajdować się w ColumnLayout.
Jeśli chcesz, to kartę możesz także ustawić w poziomie. W tym przypadku będzie ona szersza niż wyższa i lepiej będzie ją umieścić w ColumnLayout. Jeśli musisz ją umieścić w CardsLayout, to domyślnie będzie miała ustawione columnSpan na 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
jest widokiem listy, który może być użyty ze składnikami
Kirigami.AbstractCard
.
Kirigami.CardsListView rozciągnie karty podrzędne do swojej własnej szerokości. Składnika tego powinno się zatem używać tylko z kartami, które będą wyglądać dobrze przy każdym rozmiarze szerokości. Nie zalecamy używania Kirigami.CardsListView składnika Kirigami.Card, chyba, że zawiera Qt.Horizontal w swojej właściwości headerOrientation.
W wyborze pomiędzy używaniem tego widoku ze składnikiem Kirigami.AbstractCard lub zwykłym widokiem ListView ze składnikami
AbstractListItem
/
BasicListItem
rozchodzi się tylko o wygląd.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
// UWAGA: nigdy nie umieszczaj Layout jako contentItem, bo spowoduje to pętle powiązań
contentItem: Item {
implicitWidth: delegateLayout.implicitWidth
implicitHeight: delegateLayout.implicitHeight
GridLayout {
id: delegateLayout
anchors {
left: parent.left
top: parent.top
right: parent.right
// WAŻNE: nigdy nie umieszczaj dolnego marginesu
}
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
Użyj
Kirigami.CardsGridView
, aby wyświetlić karty w siatce.
Jego zachowanie jest takie same jak Kirigami.CardsLayout i umożliwia umieszczenie kart w jednej lub dwóch kolumnach w zależności od dostępnej szerokości.
CardsGridView ma to ograniczenie, że każda karta musi mieć dokładnie tę samą wysokość, więc cellHeight trzeba ustawić ręcznie na wartość, dla której treść musi zmieścić się dla każdej karty podrzędnej.
Jeśli to możliwe, to używaj tylko Kirigami.CardsGridView, gdy potrzebujesz stworzyć wiele kart. Jeśli potrzebujesz tylko kilku kart, to użyj Kirigami.CardsLayout ze składnikiem Repeater.
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
// Model o następujących rolach: text, actions oraz image
}
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
}
]
}
}
