Erstellen einer App für Ubuntu Touch [QML] - [Teil 3]

Erstellen einer App für Ubuntu Touch

Dritter Teil dieser Beitragsreihe (Teil, zweiter Teil) wo wir eine Anwendung erstellen Ubuntu-Touch oder für das gleiche Ubuntu Desktop. Ich werde einen Teil hinzufügen, der mir im vorherigen Beitrag passiert ist. Das heißt, obwohl wir die Variablen der Fehler, Treffer und Punkte erhöht haben, wurden sie nicht auf dem Bildschirm angezeigt, weil wir die Texteigenschaft der Beschriftungen nicht geändert haben:

                Beschriftung {ID: Fehlertext: "Fehler:" + Fehlerfarbe: "Rot"} Beschriftung {ID: Treffertext: "Treffer:" + geboren} Beschriftung {ID: Punktetext: "Punkte:" + nPunkte Schriftgröße: "Mittel "}

Fortsetzung der Spiellogik

Zeit

Wie wir bereits wissen, zeigt die progressBar die Zeit an, in der wir eine Frage beantworten müssen. Um die Zeit zu verwalten, in der wir einen Timer verwenden, ist der Timer ein Element, das in einem Intervall von x Millisekunden wiederholt wird. In diesem Fall wird in jedem Intervall angegeben, dass der Fortschritt der ProgressBar erhöht werden soll. Aber bevor ich sehe, ob es das Ende der Zeit erreicht hat oder nicht, müssen wir ein Leben subtrahieren, wenn es das Ende erreicht.

Sie sehen eine Codezeile, die wir noch nicht implementiert haben (PopupUtils.open (Dialog)), diese Zeile soll den Endgame-Dialog öffnen, falls wir kein Leben mehr haben (3 Bugs beseitigt). Später in diesem Beitrag werden wir sehen, wie dieser Dialog durchgeführt wird.

Timer-Code (wir können ihn unter die ProgressBar setzen):

       ProgressBar {ID: Zeit Anchors.horizontalCenter: Eltern.HorizontalCenter MinimumValue: 0 MaximumValue: 300} Timer {ID: Simpletimer C: 100 Wiederholung: True Running: True OnTriggered: {if (time.value <time.maximumValue) time.value + = 1.0 else {nfaults = nfaults + 1 if (nfaults <3) {num = num + 1 Logic.nextQuestion (num) time.value = time.minimumValue} else {simpletimer.stop () PopupUtils.open (dialog)}} }}

Wie wir sehen können, haben wir in onTriggered den Code eingefügt, der den Fortschrittsbalken erhöht und alle 1 Einheiten um 100 (Intervall) Millisekunden. Beachten Sie, dass wir der ProgressBar zwei Attribute hinzugefügt haben: MinimumValue und MaximumValue. Dies ist, wie Sie sehen können, der Maximalwert und der Minimalwert.

So starten und stoppen Sie den Timer:

simpletimer.start () simpletimer.stop ()

Optionen (50%, Einfrieren und Weiter)

Zuerst erstellen wir drei Variablen, die steuern, dass die Optionen nur einmal verwendet werden können:

    Eigenschaft int Prozent: 0 Eigenschaft int mit: 0 Eigenschaft int weiter: 0

50%

Schaltfläche {id: b50 text: "50%" onClicked: {if (Prozent == 0) {var korrekt = aDocument.contents.questions [num] .correcta if (richtig == 1) {resp2.enabled = false resp3. enabled = false} else if (richtig == 2) {resp1.enabled = false resp4.enabled = false} else if (richtig == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = false resp1.enabled = false} Prozent = 1}}

Mit enabled = false setzen wir die Schaltfläche so, dass sie nicht gedrückt werden kann, so dass wir mit aDocument.contents.questions [num] die richtige Antwort erhalten. Richtig und von hier aus abhängig davon, welche richtig ist «, eliminieren wir »Zwei Tasten, die nicht sind.

Einfrieren

                Button {id: bCon text: "Freeze" onClicked: {if (with == 0) simpletimer.stop () with = 1}}

Dies ist eine der einfachen, wir müssen nur den Timer mit simpletimer.stop () stoppen, ja, wir müssen ihn wieder einschalten (und die progressBar auf 0 setzen), wenn wir die Frage durchgehen.

Weiter

                 Schaltfläche {id: bNächster Text: "Weiter" onClicked: {if (next == 0) {num = num + 1 Logic.nextQuestion (num) next = 1}}}

Wir verwenden die Funktion, die wir bereits erstellt haben, um die Frage zu übergeben (nextQuestion).

Dialoge

Um das Spiel zu beenden, verwenden wir einen Dialog, entweder weil wir gewonnen haben (es gibt keine Fragen mehr) oder weil wir verloren haben (wir haben 3 Fehler gemacht), um die Dialoge zu verwenden, müssen wir das Modul importieren:

Ubuntu.Components.Popups 0.1 importieren

Wir werden den Dialog erstellen, der uns sagt, dass wir verloren haben:

        Komponente {id: dialog Dialog {id: dialog title: "Spiel vorbei!" Text: "Sie haben alle Leben verloren :(" Button {Text: "Beenden" onClicked: Qt.quit ()} Button {Text: "Neu beginnen" Farbe: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion ( num) npoints = 0 Geburten = 0 PopupUtils.close (Dialog)}}}}

Wir haben zwei Schaltflächen, eine zum Schließen der Anwendung (Qt.quit ()) und eine zum Starten des Spiels. Wir initialisieren die Variablen auf 0 und schließen den Dialog.

So öffnen Sie den Dialog:

PopupUtils.open (Dialog)

Um es zu schließen:

PopupUtils.close (Dialog)

Sehen wir uns den Dialog am Ende des Spiels an:

Wir können einen Dialog genauso erstellen, indem wir den Bezeichner und den Text ändern, in dem steht, dass wir gewonnen haben.

Entwerfen des Fragenaggregats

Wenn wir es entwerfen GTKWir erstellen einen Dialog, aber dieses Mal werden wir ihn in einem Tab ausführen, trotzdem hat er die gleiche Struktur:

Wie wir sehen können, werden wir ein Label, eine TextArea verwenden, um die Frage zu schreiben, 4 TextField und 4 Switch; Zum Schluss noch ein Button, um die Frage hinzuzufügen. Schauen wir uns einfach den Code an:

QtQuick 2.0 importieren Ubuntu.Components 0.1 importieren Tab {title: i18n.tr ("+ Questions") Seite {id: pageAdd Column {anchorors.top: pageAdd.top anchor.topMargin: 50 Abstand: 15 width: parent.width height: parent.height - 50 Label {id: Fragetext: "Fügen Sie der Datenbank eine Frage hinzu:" anchorors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {width: parent.width - 20 height: unit.gu ! Wenn Sie} Schalter {markiert: falsch}} Zeile {Abstand: 12 anchorors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Antwort 30" Breite: 60} Schalter {geprüft: falsch}} Zeile {Abstand: 15 anchorors.horizontalCenter: Eltern. horizontalCenter TextField {placeholderText: "Antwort 1" Breite: 300} Schalter {markiert: falsch}} Zeile {Abstand: 15 anchorors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Antwort 2" Breite: 300} Schalter {markiert: false}} Button {Text: "Add +" anchor.horizontalCenter: parent.horizontalCenter width: parent.width - 15}}}}

Mal sehen, wie es aussieht:

Wenn wir jetzt die Switches testen, werden wir sehen, dass wir sie alle als die richtige Frage markieren können, und natürlich kann nur eine sein. Deshalb werden wir Folgendes tun: Wir können jedem Switch eine Kennung geben (auch den Textfeldern, da wir den Inhalt erhalten müssen, in dem er gespeichert werden soll die Datenbank) gemäß Ihrer Antwort, und wenn wir darauf klicken, versetzen wir alle anderen in den aktivierten = falschen Modus:

             Zeile {Abstand: 15 anchorors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: Breite "Antwort 1": 300} Schalter {id: sw1 geprüft: false onClicked: {if (sw1.checked == true) {sw2. check = false sw3.checked = false sw4.checked = false}}}}

Wenn wir es jetzt versuchen, werden wir sehen, wie wir nur einen markieren können.