Tarjetas

Una tarjeta sirve como resumen, es un punto de entrada para obtener información más detallada y puede ofrecer acceso directo a las acciones más importantes de un elemento.

Los tipos de Kirigami Kirigami.AbstractCard y Kirigami.Card se usan para implementar el popular componente de tarjeta que se usa en muchas plataformas móviles y web. Las tarjetas se pueden usar para mostrar una recopilación de información o acciones de una forma atractiva y distintiva.

Kirigami también ofrece tres tipos de vistas y posicionadores para ayudarle a presentar tarjetas con diseños agradables y receptivos.

AbstractCard

Una Kirigami.AbstractCard es el tipo más sencillo de tarjeta. Solo es un rectángulo con una sombra que puede contener cualquier Item en su interior. También puede tener elementos asignados a sus propiedades header y footer. En este caso, una Kirigami.Heading es la cabecera y una Controls.Label con wrapMode definido a Text.WordWrap es el contentItem de la tarjeta.

Kirigami.AbstractCard {
    Layout.fillHeight: true
    header: Kirigami.Heading {
        text: qsTr("AbstractCard")
        level: 2
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "..."
    }
}
Captura de pantalla de una tarjeta abstracta

Card

Una Kirigami.Card hereda de Kirigami.AbstractCard y proporciona más funcionalidades listas para usar. Una tarjeta tiene una cabecera compuesta por un banner y un pie compuesto de objetos Kirigami.Action junto a su contenido principal.

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"
        // El título se puede situar en el *banner*
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

CardsLayout

Un Kirigami.CardsLayout es más útil cuando las tarjetas que se presentan no están instanciadas por un modelo o por un modelo que siempre tiene muy pocos elementos. Se presentan como una cuadrícula de dos columnas que permanecerán centradas si la aplicación es realmente ancha, o se convertirán en una sola columna si no hay suficiente espacio para dos columnas, como la pantalla de un teléfono móvil.

Un CardsLayout siempre debe estar contenido dentro de un ColumnLayout.

De forma opcional, una tarjeta se puede orientar horizontalmente. En este caso, será más ancha que alta, que es más adecuado para colocarla en un ColumnLayout. Si debe ponerla en un CardsLayout, tendrá un columnSpan de 2 de forma predeterminada.

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"
            }
        }
    }
}
Captura de pantalla de una CardsLayout

CardsListView

Una Kirigami.CardsListView es una vista de lista que se puede usar con componentes Kirigami.AbstractCard .

Una Kirigami.CardsListView estirará las tarjetas hijas a su propia anchura. Por ello, este componente solo se debe usar con tarjetas que se vean bien con cualquier tamaño horizontal. Al usar una Kirigami.CardsListView se desaconseja el uso del componente Kirigami.Card, excepto si tiene el valor Qt.Horizontal en la propiedad headerOrientation.

La elección entre usar esta vista con componentes Kirigami.AbstractCard o una ListView convencional con componentes AbstractListItem / BasicListItem es solo una cuestión de estética.

Kirigami.CardsListView {
    id: view
    model: 100

    delegate: Kirigami.AbstractCard {
        // NOTA: no usar nunca un Layout como contentItem, ya que puede provocar bucles de enlace.
        contentItem: Item {
            implicitWidth: delegateLayout.implicitWidth
            implicitHeight: delegateLayout.implicitHeight
            GridLayout {
                id: delegateLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                    // IMPORTANTE: no colocar nunca el margen 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")
                }
            }
        }
    }
}
Captura de pantalla de una CardsListView

CardsGridView

Use un Kirigami.CardsGridView para mostrar tarjetas en una cuadrícula.

Su comportamiento es el mismo que el de Kirigami.CardsLayout, y permite situar tarjetas en una o dos columnas según la anchura disponible.

CardsGridView tiene la limitación de que cada tarjeta debe tener exactamente la misma altura, por lo que debe definir manualmente cellHeight a un valor para que quepa el contenido de cada tarjeta hija.

Si es posible, use Kirigami.CardsGridView solo cuando necesite instanciar muchas tarjetas. Si solo va a instanciar unas cuantas tarjetas, opte por una Kirigami.CardsLayout con un Repeater.

Kirigami.CardsGridView {
    id: view
    model: ListModel {
        id: mainModel
        // Modelo con los siguientes roles: texto, acciones e imagen
    }
    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
            }
        ]
    }
}
Captura de pantalla de una CardsGridView