Använda Kirigami galleri
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.
Tips
Innan du fortsätter, installera Kirigami galleri. Det ska redan finnas i din Linux-distributions arkiv.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.
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.
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:
Tips
Den fullständiga källkoden för handledningen finns på invent.kde.org.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:
