Alkalmazás létrehozása az Ubuntu Touch [QML] - [3. rész] számára

Alkalmazás létrehozása az Ubuntu Touch alkalmazáshoz

A bejegyzéssorozat harmadik része (első rész, második rész), ahol alkalmazást építünk Ubuntu Touch vagy ugyanazért Ubuntu asztalon. Hozzáteszek egy részt, amely az előző bejegyzésben történt velem, vagyis, hogy bár növeltük a kudarcok, a találatok és a pontok változóit, akkor ezek nem jelentek meg a képernyőn, mert azért, mert nem változtattuk meg a a Címkék szöveg tulajdonság:

                Címke: {id: failures text: "Failures:" + nfaults color: "red"} Label {id: hits text: "Hit:" + born} Label {id: points text: "Points:" + npoints fontSize: "medium "}

A játék logikájának folytatása

Idő

Nos, amint azt már tudjuk, a progressBar megmutatja, mennyi időt kell megválaszolnunk egy kérdésre. Az időzítő használatához az időzítőt fogjuk használni, az időzítő egy olyan elem, amelyet x ezredmásodpercenként ismételünk, ebben az esetben minden egyes intervallumban azt mondjuk neki, hogy növelje a ProgressBar előrehaladását; De mielőtt megvizsgálnám, hogy eljutott-e az idők végéhez vagy sem, arra az esetre, ha a végére ér, le kell vonnunk egy életet.

Láthat egy olyan kódsort, amelyet még nem implementáltunk (PopupUtils.open (párbeszédpanel)), ez a vonal nyitja meg a végjáték párbeszédet arra az esetre, ha nincs több életünk (3 hiba kiküszöbölve), később ebben a bejegyzésben megtudjuk, hogyan kell ezt a párbeszédet folytatni.

Időzítő kód (a ProgressBar alá helyezhetjük):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Időzítő {id: simpletimer c: 100 ismétlés: true running: true onTriggered: {if (idő.érték <idő.maximumValue) idő.érték + = 1.0 else {nfaults = nfaults + 1 if (nfaults <3) {num = num + 1 Logic.nextQuestion (num) time.value = time.minimumValue} else {simpletimer.stop () PopupUtils.open (párbeszédpanel)}} }}

Mint láthatjuk, az onTriggered-be feltettük azt a kódot, amely növeli a haladási sávot, hozzáadva 1 egységet 100-onként (intervallum) milli-másodperc. Ne feledje, hogy a ProgressBar-hoz két attribútumot adtunk, a minimumValue és maximumValue, amelyek, mint látható, a maximális és a minimális érték.

Az időzítő elindítása és leállítása:

simpletimer.start () simpletimer.stop ()

Opciók (50%, Freeze és Next)

Először hozzunk létre három változót, amelyek vezérlik, hogy az opciók csak egyszer használhatók:

    ingatlan int százalék: 0 ingatlan int és 0 ingatlan következő: 0

50%

Gomb {id: b50 text: "50%" onClicked: {if (percent == 0) {var correct = aDocument.contents.questions [num] .correcta if (correct == 1) {resp2.enabled = false resp3. engedélyezett = hamis} else, ha (helyes == 2) {resp1.enabled = hamis resp4.enabled = hamis} else if (helyes == 3) {resp1.enabled = hamis resp4.enabled = hamis} else {resp2.enabled = hamis resp1.enabled = hamis} százalék = 1}}

Ha engedélyezve van = hamis, akkor azt tesszük a gombra, hogy ne lehessen megnyomni, oly módon, hogy a helyes választ kapjuk az aDocument.contents.questions [num] paranccsal. Helyes és innen, attól függően, hogy melyik helyes «mi szüntesse meg »Két olyan gombot, amelyek nem.

Freeze

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

Ez az egyik könnyebb, csak le kell állítanunk az időzítőt a simpletimer.stop () segítségével, igen, újra be kell kapcsolnunk (és a progressBar-t 0-ra kell állítanunk), amikor végiggondoljuk a kérdést.

Következő

                 Gomb {id: bKövetkező szöveg: "Next" onKattintva: {if (next == 0) {num = num + 1 Logic.nextQuestion (num) next = 1}}}

A már létrehozott függvényt használjuk a kérdés átadásához (nextQuestion).

Párbeszédek

A játék befejezéséhez használunk egy párbeszédablakot, akár azért, mert nyertünk (nincs több kérdés), akár azért, mert veszítettünk (3 hibát követtünk el), a párbeszédablakok használatához be kell importálnunk a modult:

importálja az Ubuntu.Components.Popups 0.1

Létrehozzuk azt a párbeszédpanelt, amely elmondja nekünk, hogy elvesztettük:

        {Id: dialog párbeszédpanel {id: dialog title: "Game Over!" szöveg: "Egész életét vesztette :(" Gomb {text: "Quit" onClicked: Qt.quit ()} Button {text: "Start from" color: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion (num ) npoints = 0 születés = 0 PopupUtils.close (párbeszéd)}}}}

Két gombunk van, az egyik az alkalmazás bezárásához (Qt.quit ()), a másik pedig a játék újrakezdéséhez. A változókat 0-ra inicializáljuk, és bezárjuk a párbeszédpanelt.

A párbeszédpanel megnyitása:

PopupUtils.open (párbeszédpanel)

Bezárásához:

PopupUtils.close (párbeszéd)

Lássuk a párbeszédet a játék végén:

Pontosan ugyanolyan párbeszédet hozhatunk létre az azonosító és a szöveg megváltoztatásával, ahol azt írják, hogy nyertünk.

A kérdés összesítésének megtervezése

Amikor betervezzük GTK, létrehozunk egy párbeszédpanelt, de ezúttal egy fülön fogjuk megtenni, különben is ugyanaz a felépítése:

Mint láthatjuk, egy címkét, egy textArea-t fogunk használni a kérdés megírásához, 4 TextField és 4 Switch; végül egy Gomb a kérdés hozzáadásához. Nézzük csak meg a kódot:

importálja a QtQuick 2.0 importálja az Ubuntu.Komponensek 0.1 Tab {title: i18n.tr ("+ Kérdések") Page {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 spacing: 15 width: parent.width height: parent.height - 50 Label {id: question text: "Kérdés hozzáadása az adatbázishoz:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {width: parent.width - 20 height: units.gu (12 ) contentWidth: egységek.gu (30) contentHeight: egységek.gu (60) horgonyok.horizontalCenter: parent.horizontalCenter} Sor {térköz: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "1. válasz" szélesség: 300} Váltás {ellenőrzött: hamis}} Sor {térköz: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Válasz 2" szélesség: 300} Kapcsoló {ellenőrzött: hamis}} Sor {távolság: 15 anchors.horizontalCenter: szülő. horizontalCenter TextField {placeholderText: "3. válasz" szélessége: 300} Kapcsoló {ellenőrzött: hamis}} Sor {térköz: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "4. válasz" szélesség: 300} Váltás {ellenőrzött: hamis}} Gomb {text: "Add +" horgonyok.horizontalCenter: parent.horizontalCenter szélesség: parent.width - 20}}}}

Lássuk, hogyan néz ki:

Ha most teszteljük a kapcsolókat, látni fogjuk, hogy mindegyiket helyes kérdésként jelölhetjük meg, és természetesen csak egy lehet, ezért a következőket tesszük: minden kapcsolóhoz azonosítót tudunk adni (a szövegmezők, mivel meg kell szereznünk a tartalmat az adatbázisba való mentéshez) a válaszának megfelelően, és amikor rákattintunk, az összes többit check = false módba állítjuk:

             {Spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Response 1" width: 300} switch: {id: sw1 check: false onClicked: {if (sw1.checked == true) {sw2. ellenőrzött = hamis sw3.checked = hamis sw4.checked = hamis}}}}

Ha most megpróbáljuk, meglátjuk, hogyan tudunk csak egyet jelölni.