Uporaba galerije Kirigami
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.
Nasvet
Preden nadaljujete, namestite Galerijo Kirigami. Morala bi biti že v skladišču vaše distribucije Linuxa.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.
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.
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:
Nasvet
Celotno izvorno kodo vaje najdete na invent.kde.org.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:
