Uzante Kirigami Gallery

Uzante Kirigami Gallery por trovi kodŝablonojn

Kirigami Galerio estas helpema amiko dum disvolvado de Kirigami-aplikaĵo. Ĝi estas aplikaĵo, kiu uzas kernajn funkciojn de Kirigami, provizas ligilojn al la fontkodo, konsilojn pri kiel uzi Kirigami-komponentojn kaj ligilojn al la respondaj HIG-paĝoj.

Trovi karton kradon

Navigante tra la aplikaĵo Kirigami Gallery, ni renkontos la komponanton de la galerio "Kredvido kun kartoj". Ĉi tio estas ekzemplo, kiu povas esti aplikata al multoblaj uzkazoj, kiel kontaktkartoj.

Listo de kirigami-galeriaj komponantoj

Elektinte la komponanton de la galerio "Kredvido de kartoj", se ni alklakas la butonon "Informoj" supre dekstre, ni ricevos kelkajn utilajn informojn pri la Karto kaj Abstrakta Karto-tipoj.

Kirigami-galeria kradvido

En la malsupra sekcio de ĉi tiu informa dialogo ni trovos ankaŭ ligilon al la fontkodo de la "Karda Krado-Vido". Ni navigu al ĉi tiu paĝo.

Efektivigo de karto-krado

Ni reuzos la plej grandan parton de la kodo trovita en la [fontokodo de la komponanto CardsGridViewGallery](https://invent.kde.org/sdk/kirigami-gallery/-/blob/master/src/data/contents/ui/gallery /CardsGridViewGallery.qml). Aparte, ni forigos la kromajn partojn de la OverlaySheet (kiu estas la ŝprucfenestro, kiun ni uzis por atingi la fontkodon de kirigami-galerio).

Do, ni anstataŭigos la Page komponanton de main.qml de nia skeleta aplikaĵo per la sube ScrollablePage :

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

    Kirigami.CardsGridView {
        id: view

        model: ListModel {
            id: mainModel
        }

        delegate: card
    }
}

Kion ni faris ĝis nun estas krei ScrollablePage kaj meti CardsGridView en ĝin, ĉar ni volas montri kradon de Kartoj generitaj de modelo. La datumoj de ĉiu kontakto estas provizitaj de ListModel dum la kartdelegito respondecas pri la prezento de la datumoj. Por pliaj informoj pri modeloj kaj vidoj en Qt Quick, vidu ĉi tie.

Nun ni plenigu la modelon, kiu nutros nian kradvidon per datumoj. En la difino de Kirigami.ScrollablePage , tuj post:

      delegate: card
    }

aldonu la jenon:

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 modela parto de nia efektivigo estas preta. Ni daŭrigu difini delegiton, kiu respondecos pri montri la datumojn. Do, ni aldonas la sekvan kodon al la paĝo main.qml, tuj post la Component.onCompleted difino:

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

Sekvante la rilatajn informojn en la Kirigami.Card API-paĝo , ni plenigas " standardo " kiu funkcios kiel kaplinio por montri la nomo de la kontakto kaj ankaŭ kontaktpiktogramo.

La ĉefa enhavo de la karto estis plenigita kun la poŝtelefonnumero kaj la retpoŝto de la kontakto, strukturita kiel Kolumno de Etikedoj .

La aplikaĵo devus aspekti jene:

Simpla krado de kartoj

Kiel lasta paŝo ni aldonos iun imitan funkcion al ĉiu karto. Precipe voko Ago estos aldonita. Tamen, anstataŭ vera voko, pasiva sciigo estos montrata. Do, ni ŝanĝu la komponanton "karto" al la jena:

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

Do, ni aldonis Kirigami.Action kiu, tuj kiam ĝi estas ekigita (premante la agbutonon), montras pasivan sciigon .

Rezulto

Fine, nia aplikaĵo devus aspekti jene:

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

Krado kun voka ago ekigita

Previous
Sekvaj paŝoj
Next
Koloroj kaj etosoj en Kirigami