Cartões

Um cartão sobre como visão geral e um ponto de entrada para informações mais detalhadas, podendo oferecer o acesso directo às acções mais importantes de um item.

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

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

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

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")
                }
            }
        }
    }
}

Imagem de uma CardsListView, que é uma lista vertical simples de cartões no modo de paisagem