Używanie Galerii Kirigami
Galeria Kirigami jest pomocnym przyjacielem podczas rozwoju aplikacji Kirigami. Jest to aplikacja, która używa cech Kirigami, daje wgląd w kod źródłowy, wskazówki w temacie używania składników, a także odnośniki do odpowiednich stron HIG.
Podpowiedź
Zanim przejdziesz dalej, wgraj Galerię Kirigami. Powinna ona już być w repozytorium twojej dystrybucji Linuksa.Znajdź siatkę kart
Przeglądając aplikację Galerii Kirigami, natrafimy na jej składnik o nazwie "Karty w widoku siatki". Jest to dobry kandydat na przykład do wyświetlenia siatki kart kontaktów.
Po wybraniu składnika galerii "Karty w widoku siatki", naciskamy na dolnym działaniu, poprzez co uzyskujemy przydatne dane o Karcie oraz Abstrakcyjnej Karcie.
W tym oknie informacyjnym znajduje się także odnośnik do kodu źródłowego widoku siatki kart. Przejdźmy do tej strony.
Zaimplementuj siatkę kart
Użyjemy ponownie większości kodu znajdującego się w galerii widoku kart w siatce ze strony kodu źródłowego . W szczególności, usuniemy dodatkowe części OverlaySheet (która znajduje się w implementacji galerii Kirigami, która pomogła nam w dojściu do repozytorium kodu źródłowego kirigami-gallery).
Tak więc, podmienimy składnik strony main.qml aplikacji szkieletowej poniższą stroną przewijaną:
Kirigami.ScrollablePage {
title: i18n("Address book (prototype)")
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
}
delegate: card
}
}
Dotychczas utworzyliśmy ScrollablePage i umieściliśmy w niej CardsGridView , bo chcemy wyświetlić siatkę kart wytworzoną z modelu. Dane każdego kontaktu są dostarczane przez ListModel podczas, gdy delegat karty jest odpowiedzialny za dane. Po więcej szczegółów nt. modeli i widoków w Qt Quick, zajrzyj tutaj.
Teraz wypełnijmy model, który zasili nasz widok siatki danymi. W definicji Kirigami.ScrollablePage , zaraz po:
delegate: card
}
dodaj poniższe:
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"});
}
Część modelu naszej implementacji jest gotowa. Przejdźmy do określenia delegatów, które będą odpowiedzialne za wyświetlanie danych. Tak więc, dodajemy następujący kod do strony main.qml, zaraz po określeniu 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
}
}
}
}
Podążając za powiązaną informacją na stronie api wypełniamy "banner" (jednakże jeszcze bez obrazu), który będzie działać jak nagłówek, który będzie wyświetlać zarówno nazwę jak i ikonę kontaktu.
Główna treść karty została wypełniona numerem telefonu komórkowego i adresem email kontaktu, ułożonym jako kolumna etykiet.
Aplikacja powinna wyglądać następująco:
Podpowiedź
Pełny kod źródłowy tego samouczka możesz pobrać z invent.kde.org.W ostatnim korku dodamy pewną fikcyjną funkcjonalność do każdej karty. W szczególności, zostanie dodane działanie "call". Mimo tego, zamiast rzeczywistego wywołania, zostanie wyświetlone bierne powiadomienie. Tak więc zmieńmy składnik karty następująco:
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 + " ...") }
}
]
}
}
Tak więc dodaliśmy działanie , które zaraz po jego wyzwoleniu (poprzez naciśnięcie przycisku działania), wyświetli bierne powiadomienie .
Na końcu, nasza aplikacja powinna wyglądać następująco:
