Uporaba galerije Kirigami

Uporaba Galerije Kirigami za iskanje vzorcev kod

Kirigami Galerija 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, kot tudi povezave do ustreznih HIG strani.

Išči mrežo kartic

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

Seznam komponent kirigami galerije

Po izbiri komponente galerije "Grid view of cards" bomo klikali na spodnjo akcijo in dobili bomo 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. Pojdimo do te strani.

Izvedba mreže kartic

Večino kode bomo ponovno uporabili v galeriji pogledov na kartice stran izvorne kode. Še posebej bomo odstranili dodatne dele prekrivnega lista (to je izvedba Galerije Kirigami, ki nam je pomagala priti do skladišča izvorne kode galerije kirigami).

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

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

    Kirigami.CardsGridView {
        id: view

        model: ListModel {
            id: mainModel
        }

        delegate: card
    }
}

Do zdaj smo ustvarili ScrollablePage in vanj 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 Kirigami.ScrollablePage definicija, takoj za:

      delegate: card
    }

dodajte spodnje:

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 pooblaščenca, 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: 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
            }
        }
    }
}

Sledite povezanim informacijam na strani api napolnimo "banner" (čeprav še brez slike), 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.

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". Kljub temu bo namesto pravega klica prikazano pasivno obvestilo. Torej, spremenimo kartico Komponenta na naslednje:

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

Dodali smo torej action](docs:kirigami2;Action), ki takoj, ko se sproži (s pritiskom na akcijski gumb), prikaže passive notification

Nazadnje bi morala naša aplikacija izgledati takole:

Mreža s sproženim klicnim dejanjem