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 functies van Kirigami gebruikt, koppelingen levert naar de broncode, tips over hoe de componenten te gebruiken evenals koppelingen naar de bijbehorende HIG-pagina's (richtlijnen voor menselijke interfaces).

Zoek naar een kaartraster

Navigeren door de toepassing Kirigami Gallery, we zullen stuiten op de galerijcomponent "Grid view of cards". Dit is een goede kandidaat voor een voorbeeld om een raster van contactkaarten te tonen.

Lijst met kirigami galerijcomponenten

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

Kirigami galerijrasterweergaven

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

Het kaartraster implementeren

We zullen het meeste van de code gevonden in de Cards Grid View Gallery broncodepagina hergebruiken. Speciaal zullen we de extra delen van de OverlaySheet (die de implementatie is van de Kirigami Gallery die ons geholpen heeft de opslagruimte van kirigami-gallery broncode te bereiken).

We gaan dus de paginacomponent van main.qml van de raamwerktoepassing vervangen door de onderstaande schuifbare pagina:

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 Kirigami.ScrollablePage , net na:

      delegate: card
    }

voeg het onderstaande 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 api-pagina volgend, bevolken we een "banner" (hoewel nog zonder afbeelding), 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 kolom 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 "opbel" actie worden toegevoegd. In plaats van een echter oproep, zal een passieve melding getoond worden. Laten we dus de kaartcomponent wijzigen naar het volgende:

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 actie toe die, zodra deze wordt geactiveerd (door op de actieknop te drukken), een passieve melding laat tonen.

Tenslotte zal onze toepassing er uitzien zoals deze:

Raster met opbelactie geactiveerd