Crearea unei aplicații pentru Ubuntu Touch [QML] - [Partea 3]

Crearea unei aplicații pentru Ubuntu Touch

A treia parte a acestei serii de postări (prima parte, a doua parte) unde construim o aplicație pentru Ubuntu Touch sau pentru același lucru Ubuntu desktop. Voi adăuga o parte care mi s-a întâmplat în postarea anterioară, și anume că, deși am crescut variabilele eșecurilor, accesărilor și punctelor, atunci acestea nu au fost afișate pe ecran, asta pentru că nu am modificat proprietatea text a etichetelor:

                Etichetă {id: failures text: "Eșecuri:" + nfaults culoare: "roșu"} Label {id: hits text: "hits:" + born} Label {id: points text: "Points:" + npoints fontSize: "medium "}

Continuarea logicii jocului

Timp

Ei bine, după cum știm deja, ProgressBar arată timpul pe care îl avem pentru a răspunde la o întrebare. Pentru a gestiona timpul vom folosi un Timer, temporizatorul este un element care se repetă la un interval de x milisecunde, în acest caz fiecare interval îi vom spune să crească progresul ProgressBar; Dar înainte să mă uit dacă a ajuns la sfârșitul timpului sau nu, dacă ajunge la sfârșit, trebuie să scădem o viață.

Puteți vedea o linie de cod pe care nu am implementat-o ​​încă (PopupUtils.open (dialog)), această linie urmează să deschidă dialogul de final de joc în cazul în care nu mai avem vieți (3 bug-uri eliminate), mai târziu în această postare vom vedea cum să facem acest dialog.

Codul temporizatorului (îl putem pune sub ProgressBar):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Timer {id: simpletimer c: 100 repeat: 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)}} }}

După cum putem vedea, în onTriggered punem codul care va crește bara de progres adăugând 1 unitate la fiecare 100 (interval) mili-secunde. Rețineți că am adăugat două atribute la ProgressBar, minimumValue și maximumValue, care, după cum puteți vedea, este valoarea maximă și valoarea minimă.

Pentru a porni și a opri cronometrul:

simpletimer.start () simpletimer.stop ()

Opțiuni (50%, Freeze și Next)

Mai întâi să creăm trei variabile care controlează faptul că opțiunile pot fi folosite o singură dată:

    proprietate int procent: 0 proprietate int cu: 0 proprietate int următor: 0

50%

Buton {id: b50 text: "50%" onClick: {if (percent == 0) {var corect = aDocument.contents.questions [num] .correcta if (correct == 1) {resp2.enabled = false resp3. enabled = false} else if (corect == 2) {resp1.enabled = false resp4.enabled = false} else if (corect == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = false resp1.enabled = false} procente = 1}}

Cu enabled = false ceea ce facem este să punem butonul astfel încât să nu poată fi apăsat, în așa fel încât să obținem răspunsul corect cu aDocument.contents.questions [num]. Corect și de aici în funcție de care este corect «noi elimina »Două butoane care nu sunt.

Îngheţa

                Buton {id: bCon text: „Înghețare” activat: {if (cu == 0) simpletimer.stop () cu = 1}}

Acesta este unul dintre cele ușoare, trebuie doar să oprim cronometrul cu simpletimer.stop (), da, trebuie să-l pornim din nou (și să setăm progresia la 0) când trecem prin întrebare.

Pagina Următoare →

                 Buton {id: bText următor: „Următorul” activatFăcut: {if (next == 0) {num = num + 1 Logic.nextQuestion (num) next = 1}}}

Folosim funcția pe care am creat-o deja pentru a trece întrebarea (următoarea întrebare).

Dialoguri

Pentru a încheia jocul vom folosi un dialog, fie pentru că am câștigat (nu mai sunt întrebări), fie pentru că am pierdut (am făcut 3 greșeli), pentru a utiliza dialogurile trebuie să importăm modulul:

importă Ubuntu.Components.Popups 0.1

Vom crea dialogul care ne spune că am pierdut:

        Componenta {id: dialog Dialog {id: dialog title: "Joc terminat!" text: "Ați pierdut toate viețile :(" Buton {text: "Ieșiți" peClick: Qt.quit ()} Buton {text: "Reporniți" culoare: UbuntuColors.orange onClick: {num = 0; Logica.nextQuestion (num ) npoints = 0 nașteri = 0 PopupUtils.close (dialog)}}}}

Avem două butoane, unul pentru a închide aplicația (Qt.quit ()) și altul pentru a începe jocul. Inițializăm variabilele la 0 și închidem caseta de dialog.

Pentru a deschide caseta de dialog:

PopupUtils.open (dialog)

Pentru a o închide:

PopupUtils.close (dialog)

Să vedem dialogul de la sfârșitul jocului:

Putem crea un dialog exact la fel schimbând identificatorul și textul în care scrie că am câștigat.

Proiectarea agregatului de întrebări

Când îl proiectăm în GTK, creăm un dialog, dar de data aceasta o vom face într-o filă, oricum va avea aceeași structură:

După cum putem vedea, vom folosi o etichetă, o TextArea pentru a scrie întrebarea, 4 TextField și 4 Switch; în cele din urmă, un buton pentru a adăuga întrebarea. Să ne uităm doar la cod:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Întrebări") Pagina {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 spațiu: 15 lățime: parent.width height: parent.height - 50 Label {id: question text: "Adăugați o întrebare în baza de date:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {width: parent.width - 20 height: units.gu (12 ) contentWidth: units.gu (30) contentHeight: units.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Răspuns 1" lățime: 300} Comutați {bifat: fals}} Rând {spațiere: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Răspuns 2" lățime: 300} Comutator {verificat: fals}} Rând {spațiu: 15 anchors.horizontalCenter: părinte. horizontalCenter TextField {placeholderText: "Răspuns 3" lățime: 300} Comutator {verificat: fals}} Rând {spațiere: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Răspuns 4" lățime: 300} Comutator {bifat: fals}} Buton {text: "Adăugați +" anchors.horizontalCenter: parent.horizontalCenter lățime: parent.width - 20}}}}

Să vedem cum arată:

Dacă testăm acum comutatoarele, vom vedea că le putem marca pe toate ca fiind întrebarea corectă și, în mod firesc, poate fi una singură, prin urmare vom face următoarele: vom putea furniza un identificator fiecărui comutator (de asemenea textfields, deoarece trebuie să obținem conținutul pentru a-l salva în baza de date) în funcție de răspunsul dvs., și atunci când facem clic pe acesta, vom pune pe toți ceilalți în verificat = modul fals:

             Rând {spațiere: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Răspuns 1" lățime: 300} Comutator {id: sw1 verificat: fals peClick: {if (sw1.checked == true) {sw2. verificat = fals sw3.checked = fals sw4.checked = fals}}}}

Dacă o încercăm acum, vom vedea cum putem marca doar una.