Uso de la Galería de Kirigami

Uso de la Galería de Kirigami para encontrar patrones de código

Kirigami Gallery is a helpful friend when developing a Kirigami application. It is an application that uses core Kirigami features, provides links to the source code, tips on how to use Kirigami components, and links to the corresponding HIG pages.

Encontrar una cuadrícula de tarjetas

Navigating through the Kirigami Gallery application, we will stumble upon the "Grid view with cards" gallery component. This is an example that can be applied to multiple use cases, such as contact cards.

Lista de componentes de la Galería de Kirigami

After selecting the "Grid view of cards" gallery component, if we click the "Info" button on the top right, we will get some useful information about the Card and Abstract Card types.

Vista de cuadrícula de la Galería de Kirigami

En la parte inferior de 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 una cuadrícula de tarjetas

We will reuse most of the code found in the source code of the CardsGridViewGallery component. In particular, we will remove the extra parts of the OverlaySheet (which is the pop-up we used to reach the kirigami-gallery source code repository).

So, we are going to substitute the Page component of main.qml of our skeleton app with the below ScrollablePage :

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í.

Now let's populate the model that will feed our grid view with data. In the definition of Kirigami.ScrollablePage , just after:

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

The model part of our implementation is ready. Let's proceed to defining a delegate that will be responsible for displaying the data. So, we add the following code to the main.qml page, just after the Component.onCompleted definition:

Component {
    id: card

    Kirigami.Card {

        height: view.cellHeight - Kirigami.Units.largeSpacing

        banner {
            title: i18nc("@title", "%1 %2", model.firstname, model.lastname)
            titleIcon: "im-user"
        }

        contentItem: Column {
            id: content

            spacing: Kirigami.Units.smallSpacing

            Controls.Label {
                wrapMode: Text.WordWrap
                text: i18nc("@label", "Mobile: %1", model.cellphone)
            }

            Controls.Label {
                wrapMode: Text.WordWrap
                text: i18nc("@label", "Email: %1", model.email)
            }
        }
    }
}

Following the related information on the Kirigami.Card API page , we populate a " banner " that will act as a header to display the name of the contact as well as a contact icon.

The main content of the card has been populated with the cell phone number and the email of the contact, structured as a Column of Labels .

La aplicación debería parecerse a esto:

Sencilla cuadrícula de tarjetas

As a last step we will add some dummy functionality to each card. In particular, a call Action will be added. Nevertheless, instead of a real call, a passive notification will be displayed. So, let's change the card component to the following:

69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

            Component {
                id: card
                Kirigami.Card {
                    height: view.cellHeight - Kirigami.Units.largeSpacing
                    banner {
                        title: i18nc("@title", "%1 %2", model.firstname, model.lastname)
                        titleIcon: "im-user"
                    }
                    contentItem: Column {
                        id: content
                        spacing: Kirigami.Units.smallSpacing

                        Controls.Label {
                            wrapMode: Text.WordWrap
                            text: i18nc("@label", "Mobile: %1", model.cellphone)
                        }

                        Controls.Label {
                            wrapMode: Text.WordWrap
                            text: i18nc("@label", "Email: %1", model.email)
                        }
                    }

                    actions: [
                        Kirigami.Action {
                            text: "Call"
                            icon.name: "call-start"
                            onTriggered: {
                                showPassiveNotification("Calling %1 %2...".arg(model.firstname).arg(model.lastname))
                            }
                        }

So, we added a Kirigami.Action that, as soon as it is triggered (by pressing the action button), displays a passive notification .

Resultado

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106

import QtQuick 2.15
import org.kde.kirigami 2.20 as Kirigami
import QtQuick.Controls 2.15 as Controls

Kirigami.ApplicationWindow {
    id: root
    title: "Kirigami Tutorial"
    pageStack.initialPage: mainPageComponent

    Component {
        id: mainPageComponent

        Kirigami.ScrollablePage {
            title: "Address book (prototype)"
            
            Kirigami.CardsGridView{
                id: view
                model: ListModel {
                    id: mainModel
                }
                delegate: card
            }

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

            Component {
                id: card
                Kirigami.Card {
                    height: view.cellHeight - Kirigami.Units.largeSpacing
                    banner {
                        title: i18nc("@title", "%1 %2", model.firstname, model.lastname)
                        titleIcon: "im-user"
                    }
                    contentItem: Column {
                        id: content
                        spacing: Kirigami.Units.smallSpacing

                        Controls.Label {
                            wrapMode: Text.WordWrap
                            text: i18nc("@label", "Mobile: %1", model.cellphone)
                        }

                        Controls.Label {
                            wrapMode: Text.WordWrap
                            text: i18nc("@label", "Email: %1", model.email)
                        }
                    }

                    actions: [
                        Kirigami.Action {
                            text: "Call"
                            icon.name: "call-start"
                            onTriggered: {
                                showPassiveNotification("Calling %1 %2...".arg(model.firstname).arg(model.lastname))
                            }
                        }                                        
                    ]
                }
            }
        }
    }
}

Cuadrícula con una acción de llamada disparada

Previous
Siguientes pasos
Next
Colores y temas en Kirigami