Cartões
Os tipos Kirigami AbstractCard e Card são usados para implementar o popular componente de cartão usado em muitas plataformas móveis e web. Os cartões podem ser usados para exibir um conjunto de informações ou ações de uma forma atraente e distinta.
O Kirigami também oferece 3 tipos de visualizações e posicionadores para ajudar você a apresentar seus cartões com layouts bonitos e responsivos.
AbstractCard
Um Kirigami.AbstractCard é o tipo mais simples de cartão. É apenas um retângulo com uma sombra, que pode conter qualquer Item nele. Ele também pode ter Itens atribuídos às suas propriedades header ou footer. Neste caso, um Kirigami.Heading é seu cabeçalho e um Controls.Label é o contentItem do cartão.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Cartão
Um Kirigami.Card herda de AbstractCard e oferece mais recursos prontos para uso. Os cards herdam o mesmo cabeçalho e rodapé de um Card Abstrato, mas recomendamos o uso de um banner e um conjunto de Kirigami.Action no grupo actions.
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"
// O título pode ser posicionado no banner
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}
CardsLayout
Um Kirigami.CardsLayout é mais útil quando os cards apresentados não são instanciados por um modelo ou são instanciados por um modelo que sempre possui poucos itens. Eles são apresentados como uma grade de duas colunas que permanecerão centralizados se o aplicativo for muito amplo, ou se tornarão uma única coluna se não houver espaço suficiente para duas colunas, como na tela de um celular.
Nota
CardsListView é mais adequado para modelos maiores.Um cartão pode, opcionalmente, ser orientado horizontalmente. Neste caso, ele será mais largo do que alto e é mais adequado para ser colocado em um ColumnLayout. Se você precisar colocá-lo em um CardsLayout, ele terá um maximumColumns de 2 por padrão.
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
Uma Kirigami.CardsListView é uma visualização de lista que pode ser usada com componentes AbstractCard.
Uma CardsListView esticará os cards filhos até sua própria largura. Portanto, este componente deve ser usado apenas com cards que tenham boa aparência em qualquer tamanho horizontal. O uso de um componente Card dentro dele é desencorajado, a menos que tenha Qt.Horizontal como sua propriedade headerOrientation.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
//NOTA: nunca coloque um Layout como contentItem, pois isso causará loops de vinculação
contentItem: Item {
implicitWidth: delegateLayout.implicitWidth
implicitHeight: delegateLayout.implicitHeight
GridLayout {
id: delegateLayout
anchors {
left: parent.left
top: parent.top
right: parent.right
//IMPORTANTE: nunca coloque a margem inferior
}
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")
}
}
}
}
}