Uporaba galerije Kirigami

Uporaba Galerije Kirigami za iskanje vzorcev kod

Kirigami Gallery je koristna prijateljica pri razvoju aplikacije Kirigami. To je aplikacija, ki uporablja funkcije Kirigami, zagotavlja povezave do izvorne kode, nasvete o tem, kako uporabljati komponente Kirigami, kot tudi povezave do ustreznih HIG strani.

Iskanje mreže kartic

S krmarjenjem po aplikaciji Kirigami Gallery bomo naleteli na komponento galerije "Grid view with cards". To je dober kandidat primera za prikaz mreže kartic stikov.

Seznam komponent kirigami galerije

Če bomo po izbiri komponente galerije "Grid view of cards" kliknili na gumb "Info" desno zgoraj, bomo dobili nekaj uporabnih informacij o kartici in abstraktnih vrstah kartic.

Mrežni pogled Kirigami galerije

V tem pogovornem oknu z informacijami bomo našli tudi povezavo do izvorne kode pogleda mreže kartic "Cards Grid View". Pojdimo do te strani.

Izvedba mreže kartic

Večino kode bomo ponovno uporabili v galeriji pogledov na kartice source code of the CardsGridViewGallery component. Še posebej bomo odstranili dodatne dele prekrivnega lista OverlaySheet (ki je pogovorno okno, ki smo ga uporabili da smo dosegli skladišče izvorne kode galerije kirigami).

Torej, bomo nadomestili stran Page komponento main.qml ogrodja aplikacije s spodnjo stranjo, po kateri se da drseti ScrollablePage :

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

    Kirigami.CardsGridView {
        id: view

        model: ListModel {
            id: mainModel
        }

        delegate: card
    }
}

Do zdaj smo ustvarili stran ScrollablePage in vanjo postavili CardsGridView , saj želimo prikazati mrežo kartic, ustvarjenih iz modela. Podatke vsakega stika zagotavlja ListModel, predstavnik kartice pa je odgovoren za predstavitev podatkov. Če želite več informacij o modelih in pogledih v Qt Quick, si jih oglejte tukaj.

Zdaj pa napolnimo model, ki bo naš pogled na mrežo hranil s podatki. V definicijo Kirigami.ScrollablePage , takoj za:

      delegate: card
    }

dodajte naslednje:

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

Modelni del našega izvajanja je pripravljen. Nadaljujmo z določanjem delegata, ki bo odgovoren za prikaz podatkov. Torej, dodamo naslednjo kodo na stran main.qml, takoj za definicijo Component.onCompleted :

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

Sledite povezanim informacijam na [ Kirigami.Card API page napolnimo pasico " banner ", ki bo delovala kot glava, ki bo prikazala ime stika in ikono stika.

Glavna vsebina kartice je bila napolnjena s številko mobilnega telefona in e-pošto stika, strukturirana kot stolpec oznak Labels.

Aplikacija bi morala biti takega videza:

Preprosta mreža kart

Kot zadnji korak bomo dodali nekaj slepe funkcionalnosti na vsako kartico. Še posebej bo dodano dejanje klic call Action . Kljub temu bo namesto pravega klica prikazano pasivno obvestilo. Torej, spremenimo komponenta kartice card na naslednje:

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

Dodali smo torej dejavnost Kirigami.Action , ki takoj, ko se sproži (s pritiskom na akcijski gumb), prikaže passive notification

Rezultat

Nazadnje bi morala naša aplikacija videti takole:

  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))
                            }
                        }                                        
                    ]
                }
            }
        }
    }
}

Mreža s sproženim klicnim dejanjem

Previous
Naslednji koraki
Next
Barve in teme v Kirigamiju