Uso de la Galería de Kirigami

La Galería de Kirigami es un amigo útil a la hora de desarrollar una aplicación de Kirigami. Es una aplicación que usa las funcionalidades de Kirigami, proporciona enlaces al código fuente, consejos sobre cómo se usan los componentes y enlaces a las páginas HIG correspondientes.

Encontrar una cuadrícula de tarjetas

Navegando a través de la aplicación Galería de Kirigami, nos toparemos con el componente de la galería «Vista de cuadrícula de tarjetas». Este es un buen candidato, por ejemplo, para mostrar una cuadrícula de tarjetas de contacto.

Tras seleccionar el componente de la galería «Vista de cuadrícula de tarjetas», pulsaremos la acción inferior y obtendremos información útil sobre los tipos Tarjeta y Tarjeta abstracta.

En este diálogo de información también encontraremos un enlace al código fuente de la vista de cuadrícula de tarjetas. Vayamos a dicha página.

Implementación de la cuadrícula de tarjetas

Vamos a reutilizar la mayor parte del código que se encuentra en la página de código fuente de la galería sobre la vista de cuadrícula de tarjetas. En particular, vamos a eliminar las partes adicionales a la OverlaySheet (que es la implementación de la Galería de Kirigami que nos ha ayudado a llegar al repositorio de código fuente de kirigami-gallery).

De este modo, vamos a sustituir el componente Page de main.qml de la aplicación de esqueleto con la siguiente página desplazable:

Kirigami.ScrollablePage {
    title: i18n("Address book (prototype)")

    Kirigami.CardsGridView {
        id: view

        model: ListModel {
            id: mainModel
        }

        delegate: card
    }
}

Lo que hemos hecho hasta ahora ha sido crear una ScrollablePage y colocar una CardsGridView en ella, ya que queremos mostrar una cuadrícula de tarjetas generada desde un modelo. Los datos de cada contacto los proporciona un ListModel, mientras que el delegado de la tarjeta es el responsable de la presentación de los datos. Para más información sobre modelos y vistas en Qt Quick, consulte aquí.

Ahora vamos a rellenar el modelo que alimentará nuestra vista de cuadrícula con datos. En la definición de Kirigami.ScrollablePage , después de:

      delegate: card
    }

añada lo siguiente:

Component.onCompleted: {
    mainModel.append({"firstname": "Pablo", "lastname": "Doe", "cellphone": "6300000002", "email" : "jane-doe@example.com", "photo": "qrc:/konqi.jpg"});
    mainModel.append({"firstname": "Paul", "lastname": "Adams", "cellphone": "6300000003", "email" : "paul-adams@example.com", "photo": "qrc:/katie.jpg"});
    mainModel.append({"firstname": "John", "lastname": "Doe", "cellphone": "6300000001", "email" : "john-doe@example.com", "photo": "qrc:/konqi.jpg"});
    mainModel.append({"firstname": "Ken", "lastname": "Brown", "cellphone": "6300000004", "email" : "ken-brown@example.com", "photo": "qrc:/konqi.jpg"});
    mainModel.append({"firstname": "Al", "lastname": "Anderson", "cellphone": "6300000005", "email" : "al-anderson@example.com", "photo": "qrc:/katie.jpg"});
    mainModel.append({"firstname": "Kate", "lastname": "Adams", "cellphone": "6300000005", "email" : "kate-adams@example.com", "photo": "qrc:/konqi.jpg"});
}

La parte del modelo de nuestra implementación ya está lista. Vamos a continuar definiendo un delegado que será el responsable de mostrar los datos. Para ello vamos a añadir el siguiente código a la página main.qml, justo después de la definición de Component.onCompleted:

Component {
    id: card

    Kirigami.Card {

        height: view.cellHeight - Kirigami.Units.largeSpacing

        banner {
            title: model.firstname + " " + model.lastname
            titleIcon: "im-user"
        }

        contentItem: Column {
            id: content

            spacing: Kirigami.Units.smallSpacing

            Controls.Label {
                wrapMode: Text.WordWrap
                text: "Mobile: " + model.cellphone
            }

            Controls.Label {
                wrapMode: Text.WordWrap
                text: "Email: " + model.email
            }
        }
    }
}

Siguiendo la información relacionada de la página de la API , rellenamos un banner (aunque todavía sin una imagen) que actuará como una cabecera para mostrar el nombre del contacto y su icono.

El contenido principal de la tarjeta se ha rellenado con el número de teléfono móvil y el correo electrónico del contacto, estructurados como una columna de etiquetas.

La aplicación debería parecerse a esto:

Como último paso, vamos a añadir cierta funcionalidad ficticia a cada tarjeta. En particular, añadiremos una acción «llamar». Sin embargo, en lugar de una llamada real, se mostrará una notificación pasiva. Para ello, cambiamos el Component de la tarjeta del siguiente modo:

Component {
    id: card

    Kirigami.Card {

        height: view.cellHeight - Kirigami.Units.largeSpacing

        banner {
            title: model.firstname + " " + model.lastname
            titleIcon: "im-user"
        }

        contentItem: Column {
            id: content

            spacing: Kirigami.Units.smallSpacing

            Controls.Label {
                wrapMode: Text.WordWrap
                text: "Mobile: " + model.cellphone
            }

            Controls.Label {
                wrapMode: Text.WordWrap
                text: "Email: " + model.email
            }
        }

        actions: [
            Kirigami.Action {
                text: "Call"
                icon.name: "call-start"

                onTriggered: { showPassiveNotification("Calling " + model.firstname + " " + model.lastname + " ...") }
            }
        ]
    }
}

Así, hemos añadido una acción que, en el momento en que se dispare (al pulsar el botón de acción), mostrará una notificación pasiva .

Finalmente, nuestra aplicación debería parecerse a esto: