Създаване на приложение за Ubuntu Touch [QML] - [Част 3]

Създаване на приложение за Ubuntu Touch

Трета част от тази поредица от публикации (първа част, втора част), където изграждаме приложение за Ubuntu Touch или за същото Ubuntu работен плот. Ще добавя част, която пропуснах в предишната публикация, и това е, че въпреки че увеличихме променливите на неуспехите, попаденията и точките, те не бяха показани на екрана, това е, защото не сме променили текстово свойство на етикетите:

                Етикет {id: неуспешен текст: "Неуспехи:" + nfaults color: "red"} Етикет {id: hits text: "hits:" + born} Label {id: points text: "Points:" + npoints fontSize: "medium "}

Продължение на логиката на играта

Time

Е, както вече знаем, progressBar показва времето, което трябва да отговорим на въпрос. За да управляваме времето, ще използваме таймер, таймерът е елемент, който се повтаря с интервал от х милисекунди, в този случай всеки интервал ще му кажем да увеличи напредъка на ProgressBar; Но преди да погледна дали е достигнал края на времето или не, ако стигне до края, трябва да извадим живота.

Можете да видите ред код, който все още не сме внедрили (PopupUtils.open (диалогов прозорец)), този ред е за отваряне на диалога за крайната игра, в случай че нямаме повече животи (3 грешки са премахнати), по-късно в тази публикация ще видим как да направим този диалог.

Код на таймера (можем да го поставим под лентата на напредъка):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Таймер {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)}} }}

Както виждаме, в onTriggered поставихме кода, който ще увеличи лентата на напредъка, добавяйки 1 единица на всеки 100 (интервал) милисекунди. Имайте предвид, че към ProgressBar сме добавили два атрибута, minimumValue и maximumValue, което, както виждате, е максималната стойност и минималната стойност.

За да стартирате и спрете таймера:

simpletimer.start () simpletimer.stop ()

Опции (50%, замразяване и следващо)

Първо нека създадем три променливи, които контролират, че опциите могат да се използват само веднъж:

    свойство int проценти: 0 свойство int с: 0 свойство int следващо: 0

50%

Бутон {id: b50 text: "50%" onClicked: {if (% == 0) {var correct = aDocument.contents.questions [num] .correcta if (correct == 1) {resp2.enabled = false resp3. enabled = false} else if (правилно == 2) {resp1.enabled = false resp4.enabled = false} else if (правилно == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = false resp1.enabled = false} процент = 1}}

С enabled = false това, което правим, е да поставим бутона така, че да не може да бъде натиснат, по такъв начин, че да получим верния отговор с aDocument.contents.questions [num]. Правилно и от тук в зависимост от това кой е правилен «ние премахване »Два бутона, които не са.

Freeze

                Бутон {id: bCon text: "Freeze" onClicked: {if (with == 0) simpletimer.stop () with = 1}}

Това е един от лесните, просто трябва да спрем таймера с simpletimer.stop (), да, трябва да го включим отново (и да зададем progressBar на 0), когато преминем през въпроса.

Напред

                 Бутон {id: bСледващ текст: "Напред" onClicked: {if (next == 0) {num = num + 1 Logic.nextQuestion (num) next = 1}}}

Използваме функцията, която вече сме създали, за да предадем въпроса (nextQuestion).

Диалози

За да приключим играта, ще използваме диалогов прозорец, било защото сме спечелили (няма повече въпроси) или защото сме загубили (направили сме 3 грешки), за да използваме диалоговите прозорци, трябва да импортираме модула:

импортиране на Ubuntu.Components.Popups 0.1

Ще създадем диалоговия прозорец, който ни казва, че сме загубили:

        Компонент {id: dialog Dialog {id: dialog title: "Game over!" text: "Загубихте всички животи :(" Button {text: "Quit" onClicked: Qt.quit ()} Button {text: "Start over" color: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion (num ) npoints = 0 раждания = 0 PopupUtils.close (диалог)}}}

Имаме два бутона, един за затваряне на приложението (Qt.quit ()) и друг за стартиране на играта отначало. Инициализираме променливите до 0 и затваряме диалоговия прозорец.

За да отворите диалоговия прозорец:

PopupUtils.open (диалогов прозорец)

За да го затворите:

PopupUtils.close (диалог)

Нека видим диалога в края на играта:

Можем да създадем диалог точно по същия начин, като променим идентификатора и текста, където се казва, че сме спечелили.

Проектиране на съвкупността от въпроси

Когато го проектираме GTK, създаваме диалогов прозорец, но този път ще го направим в раздел, така или иначе той ще има същата структура:

Както виждаме, ще използваме етикет, TextArea, за да напишем въпроса, 4 TextField и 4 Switch; накрая, бутон за добавяне на въпроса. Нека просто разгледаме кода:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Въпроси") Страница {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 интервал: 15 width: parent.width height: parent.height - 50 Label {id: text text: "Добавяне на въпрос към базата данни:" 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} Ред {разстояние: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 1" width: 300} Превключване {отметка: false}} Ред {интервал: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 2" width: 300} Switch {отметка: false}} Ред {spacing: 15 anchors.horizontalCenter: parent. horizontalCenter TextField {placeholderText: "Response 3" width: 300} Switch {check: false}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" width: 300} Switch {проверено: false}} Бутон {текст: "Добавяне +" anchors.horizontalCenter: parent.horizontalCenter ширина: parent.width - 20}}}}

Нека да видим как изглежда:

Ако сега тестваме превключвателите, ще видим, че можем да ги маркираме всички като правилен въпрос и разбира се може да бъде само един, следователно ще направим следното: ще можем да дадем идентификатор на всеки превключвател (също и на текстовите полета, тъй като ще трябва да получим съдържанието, за да го запазим в базата данни) според вашия отговор и когато щракнем върху него, ще поставим всички останали в режим check = false

             Ред {интервал: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Response 1" width: 300} Switch {id: sw1 check: false onClicked: {if (sw1. Check == true) {sw2. проверено = невярно sw3. проверено = невярно sw4. проверено = невярно}}}}

Ако опитаме сега, ще видим как можем да маркираме само един.