Usar la Galeria del Kirigami

Utilitzant la Galeria del Kirigami per a trobar patrons de codi

La Galeria del Kirigami és un amic útil quan es desenvolupa una aplicació amb el Kirigami. És una aplicació que utilitza les característiques del Kirigami, proporciona enllaços al codi font, consells sobre com utilitzar els components i enllaços amb les pàgines HIG corresponents.

Trobar una quadrícula de targetes

Navegant a través de l'aplicació Galeria del Kirigami, ens toparem amb el component de la galeria «Vista de quadrícula amb targetes». Aquest és un exemple que es pot aplicar a diversos casos d'ús, com targetes de contactes.

Llista de components de la Galeria del Kirigami

Després de seleccionar el component de la galeria «Vista de quadrícula de targetes», farem clic al botó d'acció de la part superior dreta i obtindrem informació útil sobre els tipus Targeta i Targeta abstracta.

Vista de quadrícula de galeria del Kirigami

A la part inferior d'aquest diàleg d'informació també trobarem un enllaç amb el codi font de la «Vista de quadrícula de targetes». Anem fins a aquesta pàgina.

Implementar una quadrícula de targetes

Reutilitzarem la major part del codi que es troba a la pàgina del codi font del component CardsGridViewGallery. En particular, eliminarem les parts addicionals d' OverlaySheet (que és la finestra emergent que fem servir per a arribar al repositori de codi font de la «kirigami-gallery»).

Llavors, substituirem el component Page de main.qml a l'esquelet de l'aplicació amb la ScrollablePage següent:

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

    Kirigami.CardsGridView {
        id: view

        model: ListModel {
            id: mainModel
        }

        delegate: card
    }
}

El que hem fet fins ara és crear una ScrollablePage i posar una CardsGridView en ella, ja que volem mostrar una quadrícula de targetes generada a partir d'un model. Les dades de cada contacte són proporcionats per un ListModel, mentre que el delegat de la targeta és responsable de la presentació de les dades. Per a obtenir més informació sobre els models i vistes a Qt Quick, vegeu aquí.

Ara, completem el model que alimentarà amb dades la nostra vista de quadrícula. En la definició de Kirigami.ScrollablePage , just després:

      delegate: card
    }

afegiu el següent:

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 part del model de la nostra implementació està llista. Procedim a definir un delegat que serà responsable de mostrar les dades. Llavors, afegim el codi següent a la pàgina main.qml, just després de la definició 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
            }
        }
    }
}

Seguint la informació relacionada a la pàgina de l'API de Kirigami.Card , omplim un « banner » que actuarà com una capçalera que mostrarà el nom del contacte, així com la seva icona.

El contingut principal de la targeta s'ha omplert amb el número de mòbil i el correu electrònic del contacte, estructurat com una Column de Labels .

L'aplicació hauria de ser així:

Quadrícula senzilla de targetes

Com a últim pas, afegirem algunes funcions fictícies a cada targeta. En particular, s'afegirà una call Action . No obstant això, en lloc d'una crida real, es mostrarà una notificació passiva. Llavors, canviarem el component card al següent:

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

Llavors, s'ha afegit una Kirigami.Action que, tan aviat com s'activi (prement el botó d'acció), mostrarà una notificació passiva .

Resultat

Finalment, la nostra aplicació s'hauria de veure així:

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

Quadrícula amb una acció de crida activada

Previous
Passos següents
Next
Colors i temes creats amb el Kirigami