Kirigami galerij gebruiken

Kirigami galerij gebruiken om codepatronen te vinden

Kirigami Gallery is een behulpzame vriend bij ontwikkelen van een Kirigami toepassing. Het is een toepassing die de kernfuncties van Kirigami gebruikt, koppelingen levert naar de broncode, tips over hoe de Kirigami-componenten te gebruiken evenals koppelingen en koppelingen naar de bijbehorende HIG-pagina's (richtlijnen voor menselijke interfaces).

Een kaartraster vinden

Bij navigeren door de toepassing Kirigami Gallery, zullen we stuiten op de galerijcomponent "Grid view of cards". Dit is een voorbeeld dat toegepast kan worden op meerdere gebruiksgevallen, zoals contactkaarten.

Lijst met kirigami galerijcomponenten

Na het selecteren van de galerijcomponent "Grid view of cards", als we klikken op de knop "Informatie", krijgen we enige nuttige informatie over de typen Card en Abstract Card.

Kirigami galerijrasterweergaven

In de ondersectie van deze informatiedialoog zullen we ook een koppeling vinden naar de broncode van de "Cards Grid View". Laten we naar deze pagina gaan.

Een kaartraster implementeren

We zullen het meeste van de code gevonden in de broncodepagina van de component CardsGridViewGallery hergebruiken. Speciaal zullen we de extra delen van de OverlaySheet (die het opdoemende is van wat we gebruiken om de opslagruimte van de kirigami-gallery broncode te bereiken).

We gaan dus de component Page van main.qml van onze raamwerktoepassing vervangen door het onderstaande ScrollablePage :

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

    Kirigami.CardsGridView {
        id: view

        model: ListModel {
            id: mainModel
        }

        delegate: card
    }
}

Wat we tot zover hebben gedaan is het aanmaken van een ScrollablePage en een CardsGridView erin gestopt, omdat we een raster mat kaarten gegenereerd uit een model willen tonen. De gegevens van elk contact wordt geleverd door een ListModel terwijl de afgeleide van de kaart verantwoordelijk is voor de presentatie van de gegevens. Voor meer informatie over modellen en weergaven in Qt Quick, zie hier.

Laten we nu het model bevolken dat onze rasterweergave met gegevens zal voeden. In de definitie van Kirigami.ScrollablePage , net na:

      delegate: card
    }

voeg het volgende toe:

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

Het modelgedeelte van onze implementatie is gereed. Laten we doorgaan om een gedelegeerde te definiëren die verantwoordelijk zal zijn voor het tonen van gegevens. We voegen dus de volgende code toe aan de pagina main.qml, net na de definitie 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
            }
        }
    }
}

De gerelateerde informatie op de Kirigami.Card API-pagina volgend, bevolken we een " banner ", die zal werken als een kop die de naam van de contactpersoon zal tonen evenals een contactpersoonpictogram.

De hoofdinhoud van de kaart is bevolkt met het mobiele telefoonnummer en het e-mailadres van de contactpersoon, gestructureerd als een Column van Labels .

De toepassing zou er als volgt uit moeten zien:

Eenvoudig raster van kaarten

Als laatste stap zullen we enige dummy functionaliteit aan elke kaart toevoegen. Speciaal zal een call Action worden toegevoegd. In plaats van een echte call, zal een passieve melding worden getoond. Laten we dus de component card wijzigen naar het volgende:

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

We voegen dus een Kirigami.Action toe die, zodra deze wordt geactiveerd (door op de actieknop te drukken), een passieve melding toont.

Resultaat

Tenslotte zal onze toepassing er uitzien zoals deze:

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

Raster met opbelactie geactiveerd

Previous
Volgende stappen
Next
Kleuren en thema's in Kirigami