Använda Kirigami galleri

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

Kirigami Galleri är en hjälpsam vän vid utveckling av Kirigami-program. Det är ett program som använder funktionerna i Kirigami, tillhandahåller länkar till källkoden, tips om hur komponenterna används samt 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 en bra komponent för att exempelvis visa ett rutnät av visitkort.

Lista över komponenter i kirigami gallery

Efter att ha valt gallerikomponenten "Grid View with Cards", klickar vi på åtgärden längst ner och får en del användbar information om typerna Card och Abstract Card.

Kirigami galleri rutnätsvy

I den här informationsdialogrutan hittar vi också en länk till källkoden i kortens rutnätsvy. Låt oss gå till den sidan.

Implementera kortrutnätet

Vi återanvänder det mesta av koden som finns i Cards Grid View Gallery source code page. Mer specifikt tar vi bort de extra delarna av OverlaySheet (som är implementeringen av Kirigami galleri som hjälpte oss att nå källkodsarkivet kirigami-gallery).

Så vi ska ersätta komponenten Page i main.qml för mallprogrammet med följande rullningsbara sidan:

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å sidan i programmeringsgränssnittet befolkar vi etta "baner" (dock utan någon bild ännu), som kommer att fungera som ett sidhuvud som visar kontaktens namn samt en kontaktikon.

Kortets huvudinnehåll har befolkats med kontaktens mobiltelefonnummer och e-postadress, strukturerad som en kolumn of 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" till. Dock visas en passiv underrättelse istället för ett riktigt anrop. Så låt oss ändra kortkomponenten på följande sätt:

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 åtgärd som visar en passiv underrättelse så snart den utlöses (genom att klicka på åtgärdsknappen).

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

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