Używanie Galerii Kirigami

Używanie Galerii Kirigami do znajdywania wzorców kodu

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.

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.

Lista składników galerii Kirigami

Po wybraniu składnika galerii “Karty w widoku siatki”, naciskamy na dolnym działaniu, poprzez co uzyskujemy przydatne dane o Karcie oraz Abstrakcyjnej Karcie.

Widok siatki Galerii Kirigami

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:

Prosta siatka kart

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:

Siatka z wywołanym działaniem wywołującym