Utilisation de la galerie de Kirigami

Utilisation de la galerie de Kirigami pour trouver des briques de codes.

La galerie de Kirigami est une amie utile lors du développement d'une application avec Kirigami. Il s'agit d'une application utilisant les fonctionnalités de Kirigami, fournissant des liens vers le code source, proposant des conseils sur l'utilisation des composants ainsi que des liens vers les pages « HIG » correspondantes.

Trouver une grille de cartes

En naviguant dans l'application de galerie de Kirigami, nous rencontrerons le composant de galerie « Affichage en grille de cartes ». C'est un bon candidat par exemple pour afficher une grille de cartes de contacts.

Liste des composants de la galerie de Kirigami

Après avoir sélectionné le composant de la galerie « Vue en grille des cartes », nous cliquerons sur l'action inférieure et nous obtiendrons des informations utiles sur les types de cartes et de cartes abstraites.

 ! Affichage en grille de la galerie de Kirigami

Dans cette boîte de dialogue d'informations, nous trouverons également un lien vers le code source de l'affichage en grille des cartes. Naviguons vers cette page.

Implémenter une grille de cartes

Nous allons réutiliser la plupart du code trouvé dans la page de code source de l'affichage en grille des cartes. En particulier, nous allons supprimer les parties supplémentaires de l'objet « OverlaySheet » (qui est l'implémentation de la galerie de Kirigami nous ayant aidé à atteindre le dépôt de code source de la galerie de Kirigami).

Ainsi, nous allons substituer le composant « Page » de « main.qml » dans le squelette de l'application avec la « Page avec défilement » :

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

    Kirigami.CardsGridView {
        id: view

        model: ListModel {
            id: mainModel
        }

        delegate: card
    }
}

Ce que nous avons fait jusqu'à présent est de créer un objet ScrollablePage et d'y placer un objet CardsGridView , puisque nous voulons afficher une grille de cartes générées à partir d'un modèle. Les données de chaque contact sont fournies par un objet ListModel, tandis que le délégué de carte est responsable de la présentation des données. Pour plus d'informations concernant les modèles et les affichages dans Qt Quick, veuillez consulter la page suivante.

Maintenant, nous allons remplir le modèle qui alimentera notre affichage en grille avec des données. Dans la définition de Kirigami.ScrollablePage , juste après :

      delegate: card
    }

ajouter la chose suivante :

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 partie de modèle de notre implémentation est prête. Passons à la définition d'un délégué qui sera responsable de l'affichage des données. Ainsi, nous ajoutons le code suivant à la page « main.qml », juste après la définition 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
            }
        }
    }
}

En suivant les informations relatives de la page api , nous créons une « bannière » (sans image pour l'instant), qui servira d'en-tête, affichant le nom du contact ainsi qu'une icône de contact.

Le contenu principal de la carte a été rempli avec le numéro de téléphone portable et l'adresse électronique du contact, structuré comme une colonne d'étiquettes.

L'application devrait ressembler à ceci :

 ! Une grille simple de cartes

Dans un dernier temps, nous ajouterons quelques fonctionnalités factices à chaque carte. En particulier, une action « Appel » sera ajoutée. Néanmoins, au lieu d'un appel réel, une notification passive sera affichée. Ainsi, modifions donc le composant de la carte comme suit :

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 + " ...") }
            }
        ]
    }
}

Nous avons donc ajouté une action qui, dès qu'elle est déclenchée (en appuyant sur le bouton d'action), affiche une notification passive .

A la fin, notre application devrait ressembler à ceci :

 ! Grille avec les appels d'actions déclenchés