Uporaba galerije Kirigami
Kirigami Gallery 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 Kirigami, kot tudi povezave do ustreznih HIG strani.
Nasvet
Preden nadaljujete, namestite Galerijo Kirigami. Morala bi biti že v skladišču vaše distribucije Linuxa.Iskanje mreže kartic
S krmarjenjem po aplikaciji Kirigami Gallery bomo naleteli na komponento galerije "Grid view with cards". To je dober kandidat primera za prikaz mreže kartic stikov.
Če bomo po izbiri komponente galerije "Grid view of cards" kliknili na gumb "Info" desno zgoraj, bomo dobili 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 "Cards Grid View". Pojdimo do te strani.
Izvedba mreže kartic
Večino kode bomo ponovno uporabili v galeriji pogledov na kartice source code of the CardsGridViewGallery component. Še posebej bomo odstranili dodatne dele prekrivnega lista OverlaySheet (ki je pogovorno okno, ki smo ga uporabili da smo dosegli skladišče izvorne kode galerije kirigami).
Torej, bomo nadomestili stran
Page
komponento main.qml
ogrodja aplikacije s spodnjo stranjo, po kateri se da drseti
ScrollablePage
:
Kirigami.ScrollablePage {
title: i18n("Address book (prototype)")
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
}
delegate: card
}
}
Do zdaj smo ustvarili stran ScrollablePage in vanjo 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 definicijo Kirigami.ScrollablePage , takoj za:
delegate: card
}
dodajte naslednje:
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"
});
}
Opomba
Upoštevajte, da{}
označuje, da dodajamo predmet JavaScript v naš model.Modelni del našega izvajanja je pripravljen. Nadaljujmo z določanjem delegata, 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 [ Kirigami.Card API page napolnimo pasico " banner ", 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 Labels.
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 call
Action
. Kljub temu bo namesto pravega klica prikazano pasivno obvestilo. Torej, spremenimo komponenta kartice card
na naslednje:
|
|
Dodali smo torej dejavnost Kirigami.Action , ki takoj, ko se sproži (s pritiskom na akcijski gumb), prikaže passive notification
Rezultat
Nazadnje bi morala naša aplikacija videti takole:
|
|