Använda Kirigami galleri

Använda Kirigami galleri för att hitta kodmönster

Kirigami Gallery är en hjälpsam vän vid utveckling av Kirigami-program. Det är ett program som använder kärnfunktionerna i Kirigami, tillhandahåller länkar till källkoden, tips om hur man använder Kirigami komponenter, och länkar till motsvarande sidor i HIG.

Hitta ett kortrutnät

Vid navigering i programmet Kirigami galleri, snubblar vi över gallerikomponenten "Grid view with cards". Det är ett exempel som kan användas för flera användarfall, såsom visitkort.

List över kirigami-gallerikomponenter

Efter att ha valt gallerikomponenten "Grid view of cards", om vi klickar på knappen "info" överst till höger får vi en del användbar information om typerna Card och Abstract Card.

Kirigami-galleri rutnätsvy

I den nedre delen av informationsdialogrutan hittar vi också en länk till källkoden för "Cards Grid View". Låt oss gå till den sidan.

Implementera ett kortrutnätet

Vi återanvänder det mesta av koden som finns i källkoden för komponenten CardsGridViewGallery. I synnerhet tar vi bort de extra delarna av OverlaySheet (som är implementeringen av rutan vi använda för att nå källkodsarkivet kirigami-gallery).

Så vi ska ersätta komponenten Page i main.qml i vårt programskelett nedanför ScrollablePage :

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

    Kirigami.CardsGridView {
        id: view

        model: ListModel {
            id: mainModel
        }

        delegate: card
    }
}

Vad vi har gjort hittills är att skapa en ScrollablePage och placera en CardsGridView i den, eftersom vi vill visa ett rutnät med kort genererade från en modell. Data för varje kontakt tillhandahålls av en ListModel medan kortdelegaten är ansvarig för datapresentationen. För mer information om modeller och vyer i Qt Quick, titta här.

låt oss nu befolka modellen som matar vår rutnätsvy med data. I definitionen av Kirigami.ScrollablePage , just efter:

      delegate: card
    }

lägg till följande:

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

Modelldelen av implementeringen är klar. Låt oss gå vidare till att definiera en delegat som är ansvarig för att visa data. Så vi lägger till följande gåt på sidan main.qml, precis efter definitionen av 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
            }
        }
    }
}

Enligt den relaterade informationen på Kirigami.Card programmeringsgränssnittssida befolkar vi ett " baner " (dock utan någon bild ännu), som kommer att fungera som ett sidhuvud för att visa kontaktens namn samt en kontaktikon.

Kortets huvudinnehåll har befolkats med kontaktens mobiltelefonnummer och e-postadress, strukturerad som en Column av Labels .

Programmet ska se ut så här:

Enkelt rutnät av kort

Som ett sista steg lägger vi till en del exempelfunktionalitet i varje kort. Närmare bestämt läggs åtgärden call Action till. Dock visas en passiv underrättelse istället för ett riktigt anrop. Så låt oss ändra komponenten card på följande sätt:

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

Så vi har lagt till en Kirigami.Action som visar en passiv underrättelse så snart den utlöses (genom att klicka på åtgärdsknappen).

Resultat

Slutligen ska vårt program se ut så här:

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

Rutnät med anropande åtgärd utlöst

Previous
Följande steg
Next
Färger och teman i Kirigami