Cartões
Os tipos do Kirigami AbstractCard e Card são usados para implementar o conhecido componente de cartões que é usado por várias plataformas móveis e da Web. Os cartões poderão ser usados para mostrar uma colecção de informações ou acções de uma forma atractiva e distinta.
O Kirigami também oferece 3 tipos de vistas e ajudantes de posição para o ajudar a apresentar as suas cartas com disposições bonitas e adaptativas.
AbstractCard
A
Kirigami.AbstractCard
is the simplest type of card. It's just a rectangle with a shadow, which can contain any
Item
in it. It can also have Items assigned to its
header
or
footer
properties. In this case a
Kirigami.Heading
is its header
and a
Controls.Label
is the card's contentItem.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
![Imagem de um Cartão Abstracto, um botão rectangular simples com o texto alinhado à esquerda](/docs/getting-started/kirigami/components-card/abstract-card.png)
Card
Um
Kirigami.Card
herda de
Kirigami.AbstractCard
e oferece mais funcionalidades de base. Estes cartões herdam os mesmos atributos
header
e
footer
de um cartão abstracto, mas aconselha-se a utilização de um
banner
e um conjunto de objectos
Kirigami.Action
no grupo actions
em alternativa.
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 poderá ser posicionado no separador
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}
![Imagem de um Card completo com um fundo separador debaixo do seu título, um fundo branco atrás do seu texto e duas acções com ícones e um menu em hambúrguer no fundo](/docs/getting-started/kirigami/components-card/card1.png)
CardsLayout
Um Kirigami.CardsLayout é mais útil quando os cartões apresentados não estão representados por um modelo ou estão por um modelo que tem sempre poucos itens. Os mesmos são dispostos como uma grelha de duas colunas que ficarão centradas, caso a aplicação seja realmente ampla, ou ficarão numa única coluna se não existir espaço suficiente para duas colunas, como acontece no ecrã de um telemóvel.
Um cartão poderá opcionalmente ser disposto na horizontal. Nesse caso, será mais larga que alta, pelo que será mais adequada para estar disposta num ColumnLayout. Se precisar de a colocar num CardsLayout , terá um maximumColumns de 2 por omissã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"
}
}
}
}
![Imagem de um CardsLayout a mostrar dois cartões lado-a-lado no formato de retrato, sobre um cartão no formato paisagem, todos com diferentes componentes usados](/docs/getting-started/kirigami/components-card/cardslayout.png)
CardsListView
Um Kirigami.CardsListView é uma lista que poderá ser usada com componentes AbstractCard .
Um
CardsListView
irá esticar os cartões-filhos para a sua própria largura. Por esse motivo, este componente só deverá ser usado com cartões que fiquem bem com qualquer tamanho horizontal. Se usar um Kirigami.CardsListView
, o componente
Card
é desencorajado, a menos que tenha
Qt.Horizontal
como valor da sua propriedade
headerOrientation
.
A opção entre usar esta janela com os componentes AbstractCard ou com uma ListView convencional com componentes AbstractListItem / BasicListItem é meramente estética.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
//NOTA: nunca colocar um Layout como 'contentItem', porque irá criar associações em ciclo
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")
}
}
}
}
}
CardsGridView
Use um Kirigami.CardsGridView para mostrar os cartões numa grelha.
O seu comportamento é o mesmo que um CardsLayout , e permite que os cartões sejam dispostos numa ou duas colunas, dependendo da largura disponível.
O CardsGridView tem a limitação que cada cartão tem de ter a mesma altura exacta, pelo que o cellHeight deverá ser definido manualmente com um dado valor, pelo que o conteúdo deverá ser suficiente para todos os cartões-filhos.
É possível usar o CardsGridView apenas quando precisar de inicializar vários cartões. Se só for criar instâncias de apenas alguns cartões, opte por um CardsLayout com um Repeater em alternativa.
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
// Modelo com os seguintes papéis: texto, acções e imagem
}
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
}
]
}
}