Kaffeemaschine

Diese App veranschaulicht eine plattformübergreifende, für verschiedene Bildschirmgrößen geeignete und responsive Umsetzung einer typischen Benutzeroberfläche für die Produktbestellung.

Ausführen des Beispiels

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

• Qt Creator

  Öffnen Sie den „ Welcome “-Modus 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.

Einführung in die Benutzeroberfläche

Dieser Abschnitt führt Sie durch den typischen Benutzerablauf der Anwendung.

Auswahl eines Rezepts

In der Kaffeemaschinen-Anwendung können Sie eine Kaffeesorte auswählen und sehen, wie viele Tassen dieser Sorte Sie noch bestellen können.

Anpassung des Kaffees

Sobald ein Rezept ausgewählt wurde, zeigt die App an, aus welchen Anteilen sich die Kaffeemischung zusammensetzt:

• gebrühter Kaffee
• heiße Milch
• Milchschaum
• Zucker

Dies kann mithilfe von Schiebereglern angepasst werden.

Anzeige des Brühstatus

Sobald der Benutzer bestätigt hat, dass die Tasse in der Maschine steht, beginnt der Brühvorgang.

Sobald der Brühvorgang gestartet wurde, zeigt die App eine animierte Darstellung des Brühvorgangs an.

Der Kaffee ist fertig

Sobald der Brühvorgang beendet ist, zeigt die App für einige Sekunden eine Kaffeetasse mit der gewünschten Kaffeemischung an, bevor sie zur Startseite zurückkehrt.

So funktioniert es

Hier erläutern wir, wie diese Funktionen umgesetzt werden.

Anpassung an Bildschirmgrößen und -ausrichtung

Das Root-Objekt des Anwendungsfensters verfügt über Anfangswerte für Höhe und Breite, die auf Desktop-Plattformen als Fenstergröße verwendet werden. Die Standard- QWindow::AutomaticVisibility stellt sicher, dass das Fenster auf Plattformen, die dies erfordern – wie beispielsweise mobilen Plattformen –, maximiert oder im Vollbildmodus angezeigt wird.

ApplicationWindow {
    visible: true
    width: 1000
    height: 600
    title: qsTr("Coffee")

    background: Rectangle {
        color: Colors.currentTheme.background
    }

Von dort aus ermitteln die untergeordneten Objekte des „ ApplicationWindow “ die Größe des „ ApplicationWindow “, um ihre eigenen Größen entsprechend festzulegen.

Die App nutzt „ GridLayout “ in allen Komponenten der Anwendungsseite, um sich problemlos an Änderungen der Bildschirmausrichtung anzupassen.

{Der Bildschirm wechselt in den Querformatmodus, wenn das Android-Gerät im Querformat gehalten wird}

{Der Querformatmodus ist die Standardausrichtung auf dem Windows-Desktop}

Navigation durch die App-Seiten

Die Anwendung nutzt den QML-Typ „ StackView “, um verschiedene Seiten der App anzuzeigen. Die „ StackView “, die die verschiedenen Seitenkomponenten verwaltet, ist in „ ApplicationFlowForm.ui.qml “ implementiert.

Die Navigation von einer Seite zur nächsten löst einen Zustandswechsel in ` ApplicationFlow.qml ` aus, wobei die erforderlichen Eigenschaftsänderungen vom QML-Typ ` PropertyChanges ` verarbeitet werden:

states: [
    State {
        name: "Home"
        PropertyChanges {
            target: toolbar
            backButton.opacity: 0
            backButton.enabled: false
            themeButton.opacity: 0
            themeButton.enabled: false
            logo.sourceSize.width: 70
            logo.sourceSize.height: 50
        }

Die Animationen, die während dieser Zustandsänderungen stattfinden, werden mit „ Transition “ und „ PropertyAnimation “ innerhalb der Komponente „ StackView “ in „ ApplicationFLowForm.ui.qml “ implementiert.

Implementierung der Startseite

Die Anwendung beginnt damit, dem Benutzer die Seite „ Home “ als erstes Element in „ StackView “ anzuzeigen:

StackView {
    id: stack
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.topMargin: parent.height / 20

    pushEnter: Transition {
        PropertyAnimation {
            property: "x"
            from: stack.width
            to: 0
            duration: 400
        }
    }

Die Komponente „ Home “ ist so aufgebaut, dass die Komponente „ Item “ als Stammobjekt mit Zustandsmaschine und entsprechenden Eigenschaftsaliasen platziert wird, gefolgt von „ GridLayout “. Diese Art der Strukturierung wird in allen Komponenten der App-Seiten verwendet.

Die Seite „ Home “ zeigt ein Bild einer Kaffeetasse mit dem Qt-Logo oben, den Titel „Coffee Machine“, eine Bildunterschrift mit einer ansprechenden Kurzbeschreibung dessen, was den Nutzer erwartet, sowie eine Schaltfläche „ getStartedButton “.

Der Nutzer kann durch Drücken der Schaltfläche „ getStartedButton “ fortfahren; die Funktion der Schaltfläche „ onClicked “ ist in „ ApplicationFlow.qml “ implementiert:

getStartedbutton.onClicked: {
    applicationFlow.state = "Coffee-selection"
    applicationFlow.stack.pushItem(applicationFlow.choosingCoffee, {appFlow: applicationFlow})
}

Dadurch wird der Zustandswechsel zu „Coffee-selection“ in „ ApplicationFlow.qml “ ausgelöst und die Komponente „ choosingCoffee “ in „ StackView “ über die Komponente „ Home “ gelegt.

Implementierung der Kaffeeauswahl

Auf der Seite „Kaffeeauswahl“ ChoosingCoffee.qml werden dem Benutzer vier verschiedene Kaffeeoptionen zur Auswahl angezeigt. Diese Optionen werden als „ CoffeeCards “ dargestellt, die sich innerhalb der Komponente „ GridLayout “ unter ChoosingCoffee.qml befinden:

GridLayout {
    id: cards
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: parent.top
    rowSpacing: 20
    columnSpacing: 20
    CoffeeCard {
        id: cappuccino
        coffeeName: "Cappuccino"
        ingredients: "Milk, Espresso, Foam"
        time: 2
    }
    CoffeeCard {
        id: latte
        coffeeName: "Latte"
        ingredients: "Coffee, Foam"
        time: 3
    }
    CoffeeCard {
        id: espresso
        coffeeName: "Espresso"
        ingredients: "Milk, Espresso"
        time: 2
    }
    CoffeeCard {
        id: macchiato
        coffeeName: "Macchiato"
        ingredients: "Milk foam, Espresso"
        time: 4
    }
}

Die Implementierung der „ CoffeeCard “ befindet sich unter CoffeeCard.qml.

Diese Karten können je nach den verfügbaren Eigenschaften für Bildschirmbreite und -höhe entweder in einer Raster- oder in einer Reihenanordnung angezeigt werden. Diese Eigenschaften werden vom Root-Objekt „ ApplicationWindow “ übernommen und über die Zustandsmaschine an „ ChoosingCoffee.qml “ sowie an die darin enthaltenen „ GridLayout “ weitergegeben.

CoffeeCards Sie unterscheiden sich in ihren Namen, Zubereitungszeiten, Zutaten und der Anzahl der derzeit verfügbaren Tassen.

Auf dieser Seite kann der Benutzer außerdem zum ersten Mal das Design der Anwendung ändern, indem er auf die kleine Schaltfläche mit dem sonnenähnlichen Symbol in der oberen rechten Ecke des Bildschirms tippt. Durch Antippen der Design-Schaltfläche wird die Funktion „ themeButton “ in „ ApplicationFlow.qml “ aufgerufen:

function themeButton() {
    if (Colors.currentTheme == Colors.dark) {
        Colors.currentTheme = Colors.light
    } else {
        Colors.currentTheme = Colors.dark
    }
}

Die Funktion ändert die Eigenschaft „ currentTheme “ von „ Colors.qml “, woraufhin sich die Farben in der gesamten App durch Eigenschaftsbindungen automatisch anpassen. Alle in der App verwendeten Farben befinden sich in „ Colors.qml “.

Wird das Design auf das helle Design umgestellt, ändert sich das Symbol für die Designumschaltung und zeigt nun einen Halbmond an.

Das Antippen einer beliebigen Kaffeekarte löst eine Zustandsänderung innerhalb von „ AbstractButton “ in „ CoffeeCard.qml “ aus, was wiederum über „ Transition “ die Seite „ NumberAnimation “ aufruft:

AbstractButton {
    width: parent.width - 2
    height: parent.height - 2
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    id: button
    hoverEnabled: true
    checkable: true
    enabled: (root.cupsLeft != 0) ? true : false
    transitions: Transition {
        NumberAnimation {
            properties: "scale"
            duration: 50
            easing.type: Easing.InOutQuad
        }
    }

Dadurch wird die ausgewählte Kaffeekarte auf eine kleinere Größe skaliert und die Ränder der Karte werden grün, was dem Benutzer anzeigt, dass der Kaffee tatsächlich ausgewählt wurde.

Jede „ button “-Eigenschaft einer Kaffeekarte, die auf die Funktion „ onClicked “ verweist, ist mit einer Funktion in „ ApplicationFlow.qml “ verknüpft. Wenn der Benutzer auf eine der Kaffeekarten klickt, wird die Funktion mit dem Namen aufgerufen, der der gewählten Kaffeeoption entspricht. Die Funktion setzt den Status von „ ApplicationFlow.qml “ auf „ Settings “, fügt eine neue Komponente zur „ StackView “ hinzu und passt die Eigenschaften der Zutaten entsprechend an.

Implementierung der Kaffeeeinstellungen

Auf dieser Seite kann der Benutzer seine Kaffeeauswahl an seine Vorlieben anpassen, indem er benutzerdefinierte QML-Typen unter Slider anpasst. Das Ändern der Werte der Schieberegler wirkt sich auf den Flüssigkeitsstand in der Kaffeetasse aus. Dies wird ermöglicht, indem die Höhe der Flüssigkeitsbilder unter Cup.qml an die Werte der entsprechenden Schieberegler gebunden wird.

Die Werte der Schieberegler auf der Seite „ Settings “ werden in „ CoffeeConfig “ gespeichert, um später mithilfe des QML-Typs „ Synchronizer “ verwendet zu werden.

Synchronizer {
     sourceObject: settingsForm.coffeeConfig
     sourceProperty: "sugarAmount"
     targetObject: settingsForm.sugarSlider
     targetProperty: "value"
}

Ein Klick auf die Schaltfläche „Start“ ändert den Status von ApplicationFlow.qml auf „Insert“, und die App zeigt Insert.qml an.

Implementierung von „Tasse einsetzen“

Auf dieser Seite wird der Benutzer aufgefordert, seinen Becher in die Maschine einzusetzen, bevor der Brühvorgang beginnen kann.

Durch Drücken der Schaltfläche „ Continue “ wechselt die App zur Seite „ Progress “.

Implementierung des Kaffeezubereitungsvorgangs

Die Fortschrittsseite zeigt eine Kaffeetasse und einen Fortschrittsbalken an, die beide auf ihre eigene Weise den Brühvorgang in Echtzeit anzeigen.

Die Kaffeetasse zeigt nach dem Befüllen genau die gleiche Konfiguration an, die der Benutzer auf der Seite „ Settings “ ausgewählt hat. Dies wird sichergestellt, indem die Eigenschaftsvariablen von „ Cup “ an die entsprechenden, unter „ ApplicationFlow.qml “ gespeicherten Werte gebunden werden.

Die Animation zum Befüllen der Kaffeetasse erfolgt mithilfe der Zustandsmaschinen Transition und SmoothedAnimation.

Cup {
    id: cup
    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
    state: "0"
}

Die Animation des Fortschrittsbalkens wird mit „ Behavior “ umgesetzt.

Behavior on greenBar.width {
    SmoothedAnimation {
        easing.type: Easing.Linear
        velocity: (progressForm.contentItem.width / progressForm.brewTime) * 1000
    }
}

Timer sorgt für die Aktualisierung des Anwendungszustands, sobald der Brühvorgang abgeschlossen ist.

Timer {
    id: timer
    interval: progressForm.brewTime
    running: true
    onTriggered: {
        progressForm.appFlow.onFinished()
    }
}

Implementierung der Seite „Kaffee fertig“

Die Seite „Bereit“ zeigt eine Kaffeetasse an, die entsprechend der vom Benutzer gewählten Konfiguration gefüllt ist, zusammen mit dem Text „Ihr Kaffee ist fertig“ und einem Häkchen-Symbol.

Wenn diese Seite angezeigt wird, wird ein „ Timer “ gestartet, und sobald das festgelegte Intervall erreicht ist, wird der Benutzer zurück zu Home.qml weitergeleitet.

Quelldateien

Squish-GUI-Tests

Diese Anwendung enthält Squish-GUI-Tests, die auf Qt für Android ausgerichtet sind. Die Tests wurden mit Squish für Qt erstellt, sind in Python geschrieben und befinden sich im Testverzeichnis der Anwendung.

Wenn Sie Squish für Qt für Android verwenden, stellen Sie sicher, dass Sie den in Qt integrierten Hook nutzen und den Squish-Port mit adb weiterleiten. Falls bei einem Fehlschlag von „ dlopen “ die Fehlermeldung „Cannot load library“ erscheint, deaktivieren Sie „ QT_USE_TARGET_ANDROID_BUILD_DIR “ in der CMake-Konfiguration oder entfernen Sie den Eintrag unter „ Projects->Build Settings->CMake->Current Configuration “ in der Datei „ Qt Creator “.

Falls du keine Squish-Lizenz hast, kannst du eine kostenlose Testversion erhalten.

Beispielprojekt auf code.qt.io