Kaffeemaschine

Coffee Machine Beispiel Übersicht

Diese Anwendung demonstriert eine plattformübergreifende, bildschirmübergreifende und reaktionsfähige Implementierung einer typischen Benutzeroberfläche für Produktbestellungen.

Auswählen eines Rezepts

Die Kaffeeauswahl

Die Kaffeemaschinen-Anwendung lässt Sie eine Kaffeesorte auswählen und zeigt an, wie viele Kaffees dieser Sorte Sie noch bestellen können.

Kaffee-Anpassung

Nach der Auswahl eines Rezepts zeigt die Anwendung an, welches Verhältnis die Kaffeemischung haben wird:

• gebrühtem Kaffee
• heißer Milch
• Milchschaum
• Zucker

Dies kann mit Schiebereglern geändert werden.

Anzeige des Brühstatus

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

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

Der Kaffee ist fertig

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

Wie das funktioniert

Im Folgenden erläutern wir, wie diese Funktionen implementiert sind.

Anpassung an Bildschirmgröße und -ausrichtung

Das Stammobjekt des Anwendungsfensters hat Anfangswerte für Höhe und Breite, die auf Desktop-Plattformen als Fenstergröße verwendet werden. Die Standardeinstellung QWindow::AutomaticVisibility stellt sicher, dass das Fenster auf Plattformen, die dies erfordern, wie z. B. mobile Plattformen, maximiert oder als Vollbild angezeigt wird.

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

Untergeordnete Objekte des ApplicationWindow holen sich die Größe des ApplicationWindow, um ihre eigenen Größen entsprechend zu bestimmen.

Die App verwendet GridLayout in allen Komponenten der Anwendungsseite, um sich leicht an Änderungen der Bildschirmausrichtung anzupassen.

Navigieren durch die Anwendungsseiten

Die Anwendung verwendet den StackView QML-Typ, um verschiedene Seiten der Anwendung anzuzeigen. Die StackView Handhabung der verschiedenen Seitenkomponenten ist in ApplicationFlowForm.ui.qml implementiert.

Das Navigieren von einer Seite zur nächsten löst eine Zustandsänderung in ApplicationFlow.qml aus, wobei die erforderlichen Eigenschaftsänderungen vom PropertyChanges QML-Typ 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, dass dem Benutzer die Seite Home als erstes Element in StackView angezeigt wird:

StackView {
    id: stack
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.topMargin: parent.height / 20
    initialItem: Home {
        id: home
        visible: true
        state: applicationFlow.mode
    }
    pushEnter: Transition {
        PropertyAnimation {
            property: "x"
            from: stack.width
            to: 0
            duration: 400
        }
    }

Die Komponente Home wird strukturiert, indem die Komponente Item als Wurzelobjekt mit Zustandsmaschine und entsprechenden Eigenschaftsaliasen platziert wird, gefolgt von GridLayout. Dieselbe Art der Strukturierung wird in allen Komponenten der App-Seite verwendet.

Die Seite Home zeigt ein Bild einer Kaffeetasse mit dem Qt-Logo obenauf, Coffee Machine als Titel, eine Überschrift mit einer einprägsamen Information über das, was den Benutzer erwartet, und eine Schaltfläche getStartedButton.

Der Benutzer kann weitergehen, indem er die getStartedButton drückt. Die Funktion der Schaltfläche onClicked ist in ApplicationFlow.qml implementiert:

home.getStartedbutton.onClicked: {
    applicationFlow.state = "Coffee-selection"
    stack.push(choosingCoffee)
}

Dies löst den Zustandswechsel zu "Kaffee-Auswahl" in ApplicationFlow.qml aus und schiebt die Komponente choosingCoffee über die Komponente Home in StackView.

Implementierung der Kaffee-Auswahl

Auf der Seite "Kaffeeauswahl" ChoosingCoffee.qml werden dem Benutzer 4 verschiedene Kaffeeoptionen zur Auswahl angezeigt. Diese Optionen werden als CoffeeCards angezeigt und befinden sich innerhalb von GridLayout in ChoosingCoffee.qml:

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
        cupsLeft: applicationFlow.cappuccinos
    }
    CoffeeCard {
        id: latte
        coffeeName: "Latte"
        ingredients: "Coffee, Foam"
        time: 3
        cupsLeft: applicationFlow.lattes
    }
    CoffeeCard {
        id: espresso
        coffeeName: "Espresso"
        ingredients: "Milk, Espresso"
        time: 2
        cupsLeft: applicationFlow.espressos
    }
    CoffeeCard {
        id: macchiato
        coffeeName: "Macchiato"
        ingredients: "Milk foam, Espresso"
        time: 4
        cupsLeft: applicationFlow.macchiatos
    }
}

Die Implementierung von CoffeeCard befindet sich unter CoffeeCard.qml.

Diese Karten können entweder in einem Raster oder in einer Reihe angezeigt werden, je nach den verfügbaren Eigenschaften für Bildschirmbreite und -höhe, die das ApplicationWindow Root-Objekt befolgt und über den Zustandsautomaten an ChoosingCoffee.qml und GridLayout weitergibt.

CoffeeCards variieren in ihren Namen, Brühzeiten, Zutaten und wie viele Tassen im Moment verfügbar sind.

Auf dieser Seite kann der Benutzer auch zum ersten Mal das Thema der Anwendung ändern, indem er die kleine sonnenähnliche Schaltfläche in der oberen rechten Ecke des Bildschirms drückt. Durch Drücken der Schaltfläche "Thema" 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 und die Farben ändern sich in der gesamten Anwendung automatisch durch Eigenschaftsbindungen. Alle in der App verwendeten Farben befinden sich in Colors.qml.

Wenn das Thema auf das helle Thema umgestellt wird, verwandelt sich das Symbol der Schaltfläche zum Ändern des Themas in einen Halbmond.

Ein Druck auf eine der Kaffeekarten löst eine Zustandsänderung in AbstractButton in CoffeeCard.qml aus, die dann NumberAnimation bis Transition auslöst:

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

Dadurch wird die ausgewählte Kaffeekarte verkleinert und die Ränder der Karte werden grün, um dem Benutzer zu zeigen, dass der Kaffee tatsächlich ausgewählt wurde.

Jede Kaffeekarte button Eigenschaft alias onClicked Funktion bindet an eine Funktion, die sich in ApplicationFlow.qml befindet. Wenn der Benutzer auf eine der Kaffeekarten drückt, wird die Funktion aufgerufen, deren Name mit der gewählten Kaffeeoption korreliert. Die Funktion setzt den Status von ApplicationFlow.qml auf Settings, schiebt eine neue Komponente auf StackView und setzt die Eigenschaften der Zutaten entsprechend.

Implementierung von Kaffee-Einstellungen

Auf dieser Seite kann der Benutzer seine Kaffeeoption an seine Vorlieben anpassen, indem er die Slider QML-Typen anpasst. Die Änderung der Werte der Schieberegler wirkt sich auf den Flüssigkeitsstand in der Kaffeetasse aus. Dies ist möglich, indem die Höhe der Flüssigkeitsbilder in Cup.qml an die Werte der entsprechenden Schieberegler gebunden wird.

Die Werte der Schieberegler werden über die Funktion onValueChanged in Eigenschaftsvariablen in ApplicationFLow.qml gespeichert.

coffeeSlider.onValueChanged: {
    applicationFlow.coffeeAmount = coffeeSlider.value
}

Wenn Sie auf die Schaltfläche Start klicken, ändert sich der Status von ApplicationFlow.qml in "Einfügen", und die App zeigt Insert.qml an.

Implementierung der Einfügetasse

Auf dieser Seite wird der Benutzer angewiesen, seine Tasse in die Maschine einzusetzen, bevor der Brühvorgang beginnen kann.

Wenn Sie die Taste Continue drücken, wechselt die App zur Seite Progress.

Implementierung der Kaffeezubereitung

Auf der Fortschrittsseite werden eine Kaffeetasse und ein Fortschrittsbalken angezeigt, die beide auf ihre eigene Weise den Brühvorgang in Echtzeit signalisieren.

Die Kaffeetasse zeigt hier nach dem Befüllen genau die gleiche Konfiguration an, die der Benutzer auf der Seite Settings ausgewählt hat. Dies wird durch die Bindung der Eigenschaftsvariablen von Cup an die gespeicherten entsprechenden Werte auf ApplicationFlow.qml sichergestellt.

Die Animation zum Befüllen der Kaffeetasse erfolgt mit den State Engines Transition und SmoothedAnimation.

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

Die Animation des Fortschrittsbalkens wird mit Behavior realisiert.

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

Timer kümmert sich um die Aktualisierung des Anwendungsstatus, sobald der Brühvorgang abgeschlossen ist.

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

Implementierung von Coffee Ready

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

Wenn diese Seite angezeigt wird, beginnt Timer zu laufen und sobald das eingestellte Intervall erreicht ist, wird der Benutzer zurück zu Home.qml geleitet.

Beispielprojekt @ code.qt.io