Qt Quick Controls - Wearable-Demo

Die Wearable-Demo besteht aus einem Anwendungsstarter und einer Sammlung kleiner, einfacher Beispielanwendungen für Wearables.

Struktur

Die Haupt-QML-Datei „ wearable.qml “ besteht aus einem „ ApplicationWindow “, einem „ StackView “ für ein stapelbasiertes Navigationsmodell sowie Schaltflächen für die interaktive Navigation.

QQC2.ApplicationWindow {
    id: window
    ...
    QQC2.StackView {
        id: stackView
        ...
        initialItem: LauncherPage {
            onLaunched: (title, page, fallback) => {
                            var createdPage = Qt.createComponent(page)
                            if (createdPage.status !== Component.Ready)
                                createdPage = Qt.createComponent(fallback)
                            stackView.push(createdPage)
                            header.title = title
                        }
        }
        ...
    }

    DemoMode {
        stackView: stackView
    }

    DemoModeIndicator {
        id: demoModeIndicator
        visible: WearableSettings.demoMode
        y: WearableSettings.demoMode ? header.height + 3 : -height - header.height - 3
        anchors.horizontalCenter: parent.horizontalCenter
        z: header.z + 1
    }

    MouseArea {
        enabled: WearableSettings.demoMode
        anchors.fill: parent
        onClicked: {
            // Stop demo mode and return to the launcher page.
            WearableSettings.demoMode = false
            stackView.pop(null)
        }
    }
}

Gestaltung

Die Demo verwendet einen benutzerdefinierten „Qt Quick Controls 2“-Stil, der in die Ressourcen der Demo eingebettet ist. Der benutzerdefinierte Stil ist nur für einige wenige Steuerelemente implementiert, da er spezifisch für diese spezielle Demo ist. Er nutzt einen Singleton-Typ für verschiedene Stilattribute wie Schriftarten und Farben.

• WearableStyle/PageIndicator.qml
• WearableStyle/Slider.qml
• WearableStyle/Switch.qml
• WearableStyle/UIStyle.qml

Der Stil wird in „ main() “ unter „ wearable.cpp “ angewendet:

QQuickStyle::setStyle(QStringLiteral("WearableStyle"));

Der Hauptvorteil der Verwendung des integrierten Styling-Systems besteht darin, dass die Stilauswahl für den Anwendungscode vollständig transparent ist. Es ist nicht erforderlich, einen bestimmten Ordner zu importieren, der die gestylten Steuerelemente enthält. Auf diese Weise kann die Anwendung auch mit anderen Stilen ausgeführt werden.

Startseite

Der Anwendungsstarter wird mithilfe eines zirkulären „ PathView “ in „ LauncherPage.qml “ implementiert. Jede Anwendung befindet sich in einer separaten .qml-Datei, die auf der Startseite über „ ListModel “ hinzugefügt wird. Für einige Anwendungen wird eine Fallback-Option bereitgestellt, um optionale Abhängigkeiten wie QtLocation zu handhaben.

PathView {
    id: circularView

    signal launched(string title, string page, string fallbackpage)
    ...
    model: ListModel {
        ListElement {
            title: qsTr("Navigation")
            pageIcon: "maps"
            page: "NavigationPage.qml"
            fallback: "NavigationFallbackPage.qml"
        }
        ...
        ListElement {
            title: qsTr("Settings")
            pageIcon: "settings"
            page: "SettingsPage.qml"
            fallback: ""
        }
    }
    delegate: QQC2.RoundButton {
        ...
        icon.width: 36
        icon.height: 36
        icon.source: UIStyle.iconPath(pageIcon)
        icon.color: UIStyle.textColor
        ...
        onClicked: {
            if (PathView.isCurrentItem)
                circularView.launched(title, Qt.resolvedUrl(page), Qt.resolvedUrl(fallback))
            else
                circularView.currentIndex = index
        }
    }
    ...
}

Anwendungen

Die Anwendungen sind für die Touch-Eingabe konzipiert und orientieren sich dabei an den Eingabemethoden und Kommunikationsmöglichkeiten, die typischerweise von Wearables angeboten werden.

Die meisten Anwendungen verfügen über eigene JavaScript-Dateien, die als Dummy-Backends dienen. Sie veranschaulichen, wie externe Daten abgerufen, bearbeitet oder konvertiert werden können. Beispielsweise liest die Anwendung „ Weather “ mithilfe von XMLHttpRequest Daten aus lokalen Dateien. Diese Dateien wurden durch das Speichern von Antworten von Remote-Servern im JSON-Format generiert. Dieser Code lässt sich leicht anpassen, um Daten von Remote-Servern abzurufen.

Navigation

Diese Anwendung nutzt das QtLocation-Modul, um eine Route innerhalb von Oslo anzuzeigen. Ist QtLocation nicht installiert, werden ein statisches Bild als Karte sowie Routeninformationen auf Basis einer JSON-Datei angezeigt. Derzeit ist es nicht möglich, Start- und Zielort innerhalb der Anwendung festzulegen, dies kann jedoch je nach den Fähigkeiten des Geräts hinzugefügt werden. Beispielsweise können Sie die erforderlichen Informationen mit einer der folgenden Methoden erfassen:

• Implementiere zusätzliche Bildschirme, um Eingaben vom Benutzer zu erfassen
• Kommunizieren Sie über Bluetooth oder WLAN mit einem anderen Gerät (Smartphone oder PC).

Wetter

Diese Anwendung zeigt Wetterinformationen wie Temperatur, Sonnenauf- und -untergangszeiten, Luftdruck usw. an. Diese Informationen werden über die REST-API von https://openweathermap.org/ abgerufen. Die API-Antwort liegt im JSON-Format vor und wird von der Anwendung mithilfe von JavaScript ausgewertet. Diese Anwendung lässt sich zudem durch Hinzufügen von Bildschirmen anpassen, um Wetterdaten für einen bestimmten Ort abzurufen.

Weltzeituhr

Diese Anwendung zeigt eine Weltzeituhr für verschiedene Städte an. Derzeit ist die Liste der Städte fest in der Anwendung programmiert, dies kann jedoch je nach Eingabemöglichkeiten des Geräts angepasst werden.

Sonstiges

Die übrigen Anwendungen geben vorerst statische Daten zurück, können jedoch so angepasst werden, dass sie Antwortdaten verarbeiten, die von den jeweiligen Diensten abgerufen werden.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Beispielprojekt @ code.qt.io