Qt Quick Contrôles - Démonstration pour appareils portables

La démo Wearable consiste en un lanceur d'applications et une collection d'exemples d'applications simples et de petite taille destinées aux appareils portables.

Structure

Le fichier .qml principal, wearable.qml, se compose d'un ApplicationWindow, d'un StackView pour un modèle de navigation par pile et de boutons pour la navigation interactive.

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)
        }
    }
}

Style

La démo utilise un style personnalisé Qt Quick Controls 2 intégré dans les ressources de la démo. Le style personnalisé est implémenté pour quelques contrôles seulement, car il est spécifique à cette démo particulière. Il utilise un type unique pour divers attributs de style, tels que les polices et les couleurs.

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

Le style est appliqué dans main() dans wearable.cpp:

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

Le principal avantage de l'utilisation du système de style intégré est que la sélection du style est totalement transparente pour le code de l'application. Il n'est pas nécessaire d'importer un dossier spécifique contenant les contrôles stylisés. Ainsi, l'application peut être exécutée avec d'autres styles.

Page de lancement

Le lanceur d'application est implémenté à l'aide d'une page circulaire PathView dans LauncherPage.qml. Chaque application se trouve dans un fichier .qml distinct, qui est ajouté à ListModel sur la page de lancement. Pour certaines applications, une option de repli est fournie pour gérer les dépendances optionnelles comme QtLocation.

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
        }
    }
    ...
}

Applications

Les applications sont conçues pour la saisie tactile en fonction des méthodes de saisie ou des moyens de communication généralement proposés par les dispositifs portables.

La plupart des applications ont leurs propres fichiers JavaScript qui agissent comme des backends d'application factices. Elles montrent comment récupérer et manipuler ou convertir des données externes. Par exemple, l'application Weather lit des données à partir de fichiers locaux à l'aide de XMLHttpRequest. Ces fichiers ont été générés en stockant les réponses de serveurs distants au format JSON. Ce code peut être facilement modifié pour acquérir des données à partir de serveurs distants.

Navigation

Cette application utilise le module QtLocation pour afficher un itinéraire dans Oslo. Si QtLocation n'est pas installé, elle affiche une image statique comme carte et des informations sur l'itinéraire basées sur un fichier JSON. Actuellement, il n'est pas possible de spécifier la source et la destination à partir de l'application, mais cela peut être ajouté en fonction des capacités de l'appareil. Par exemple, vous pouvez collecter les informations nécessaires en utilisant l'une des méthodes suivantes :

• implémenter des écrans supplémentaires pour recueillir les données de l'utilisateur
• Communiquer avec un autre appareil (téléphone intelligent ou PC) par l'intermédiaire de canaux Bluetooth ou WiFi.

Météo

Cette application affiche des informations météorologiques telles que la température, les heures de lever et de coucher du soleil, la pression atmosphérique, etc. Ces informations sont obtenues à partir de https://openweathermap.org/ à l'aide de son API REST. La réponse de l'API est au format JSON, qui est analysé par l'application à l'aide de JavaScript. Cette application peut également être modifiée en ajoutant des écrans permettant d'obtenir des données météorologiques pour un lieu donné.

Horloge mondiale

Cette application affiche une horloge mondiale pour différentes villes. Pour l'instant, la liste des villes est codée en dur dans l'application, mais elle peut être modifiée en fonction des capacités de saisie de l'appareil.

Autres applications

Les autres applications renvoient des données statiques pour l'instant, mais elles peuvent être modifiées pour traiter les données de réponse obtenues des services respectifs.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutorial : Construire et exécuter.

Exemple de projet @ code.qt.io