Lumilikha ng isang app para sa Ubuntu Touch [QML] - [Bahagi 3]

Lumilikha ng isang app para sa Ubuntu Touch

Pangatlong bahagi ng post seryeng ito (unang bahagi, ikalawang bahagi) kung saan kami ay bumubuo ng isang application sa Ubuntu Touch o para sa pareho Ubuntu desktop. Magdaragdag ako ng isang bahagi na nangyari sa akin sa nakaraang post, at iyon ay kahit na nadagdagan namin ang mga variable ng mga pagkabigo, hit at point, pagkatapos ay hindi ito ipinakita sa screen, iyon ay dahil hindi namin binago ang pag-aari ng teksto ng Mga Label:

                Label {id: failures text: "Failures:" + nfaults color: "red"} Label {id: hits text: "hits:" + born} Label {id: points text: "Points:" + Mga pahinang fontSize: "medium "}

Pagpapatuloy ng lohika ng laro

Tiempo

Buweno, tulad ng alam na natin, ipinapakita ng progressBar ang oras na kailangan nating sagutin ang isang katanungan. Upang pamahalaan ang oras na gagamitin namin ang isang Timer, ang timer ay isang elemento na paulit-ulit sa isang agwat ng x milliseconds, sa kasong ito ang bawat agwat sasabihin namin ito upang madagdagan ang pag-unlad ng ProgressBar; Ngunit bago ko tingnan kung umabot na sa katapusan ng oras o hindi, kung umabot ito sa wakas, kailangan nating bawasan ang isang buhay.

Maaari kang makakita ng isang linya ng code na hindi pa namin naipatupad (PopupUtils.open (dayalogo)), ang linyang ito ay upang buksan ang endgame na dayalogo kung sakaling wala na kaming mga buhay (inalis ang 3 mga bug), sa paglaon sa post na ito makikita natin kung paano gawin ang dayalogo na ito.

Timer code (maaari nating ilagay ito sa ibaba ng ProgressBar):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Timer {id: simpletimer c: 100 ulitin: totoong tumatakbo: true onTriggered: {if (time.value <time.maximumValue) time.value + = 1.0 naman {nfaults = nfaults + 1 kung (nfaults <3) {num = num + 1 Logic.nextQuestion (num) time.value = time.minimumValue} iba pa {simpletimer.stop () PopupUtils.open (dialog)}} }}

Tulad ng nakikita natin, sa onTriggered inilalagay namin ang code na magpapataas sa progressbar na nagdaragdag ng 1 unit bawat 100 (agwat) milli-segundo. Tandaan na nagdagdag kami ng dalawang mga katangian sa ProgressBar, minimumValue at maximumValue, na, tulad ng nakikita mo, ay ang maximum na halaga at ang minimum na halaga.

Upang simulan at ihinto ang timer:

simpletimer.start () simpletimer.stop ()

Mga Pagpipilian (50%, I-freeze at Susunod)

Lumikha muna tayo ng tatlong mga variable na nagkokontrol na ang mga pagpipilian ay maaari lamang magamit nang isang beses:

    pag-aari int porsyento: 0 pag-aari int kasama ang: 0 pag-aari int susunod: 0

50%

Button {id: b50 text: "50%" onClicked: {kung (porsyento == 0) {var correct = aDocument.contents.questions [num] .correcta kung (tama == 1) {resp2.enabled = false resp3. pinagana = maling} iba kung (tama == 2) {resp1.enabled = false resp4.enabled = false} iba kung (tama == 3) {resp1.enabled = false resp4.enabled = false} iba pa {resp2.enabled = maling resp1.enified = false} porsyento = 1}}

Sa pinagana = maling ginagawa natin ay ilagay ang pindutan upang hindi ito mapindot, sa paraang makuha namin ang tamang sagot sa aDocument.contents.questions [num]. Tama at mula dito depende sa alin ang tama «tinatanggal namin »Dalawang pindutan na hindi.

I-freeze

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

Ito ay isa sa mga madali, kailangan lang nating ihinto ang timer gamit ang simpletimer.stop (), oo, dapat nating i-on muli ito (at itakda ang progressBar sa 0) kapag naipasa natin ang tanong.

susunod

                 Button {id: bNext text: "Susunod" onClicked: {kung (susunod == 0) {num = num + 1 Logic.nextQuestion (num) susunod = 1}}}

Ginagamit namin ang pagpapaandar na nilikha na namin upang maipasa ang tanong (nextQuestion).

Mga dayalogo

Upang wakasan ang laro gagamitin namin ang isang Dialog, alinman dahil sa nanalo kami (wala nang mga katanungan) o dahil natalo kami (gumawa kami ng 3 mga pagkakamali), upang magamit ang mga dayalogo dapat naming i-import ang module:

i-import ang Ubuntu.Components.Popups 0.1

Lilikha kami ng dayalogo na nagsasabi sa amin na nawala na kami:

        Component na {id: dialog Dialog {id: dialog title: "Game Over!" teksto: "Nawalan ka ng lahat ng buhay :(" Button {text: "Exit" onClicked: Qt.quit ()} Button {text: "Start over" color: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion ( num) npoints = 0 births = 0 PopupUtils.close (dayalogo)}}}}

Mayroon kaming dalawang mga pindutan, isa upang isara ang application (Qt.quit ()) at isa pa upang masimulan ang laro. Pinasimulan namin ang mga variable sa 0 at isara ang dayalogo.

Upang buksan ang dayalogo:

PopupUtils.open (dayalogo)

Upang isara ito:

PopupUtils.close (dayalogo)

Tingnan natin ang dayalogo sa pagtatapos ng laro:

Maaari kaming lumikha ng isang dayalogo na eksaktong pareho sa pamamagitan ng pagbabago ng identifier at ang teksto kung saan sinasabi na nanalo kami.

Pagdidisenyo ng pinagsamang tanong

Kapag dinisenyo namin ito sa gTK, lumikha kami ng isang dayalogo, ngunit sa oras na ito ay gagawin namin ito sa isang Tab, gayon pa man magkakaroon ito ng parehong istraktura:

Tulad ng nakikita natin, gagamit kami ng isang Label, isang TextArea upang isulat ang tanong, 4 TextField at 4 Switch; sa wakas, isang Pindutan upang idagdag ang tanong. Tingnan lamang natin ang code:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Mga Katanungan") Pahina {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 spacing: 15 width: parent.width taas: parent.height - 50 Label {id: question text: "Magdagdag ng isang katanungan sa database:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "malaki"} TextArea {width: parent.width - 20 taas: unit.gu (12) contentWidth: unit.gu (30) contentHeight: unit.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Tugon 1" lapad: 300 Nyawang} Lumipat {check: false}} Hilera {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 2" width: 300} Switch {check: false}} Row {spacing: 15 anchors.horizontalCenter: parent. pahalangCenter TextField {placeholderText: lapad na "Tugon 3": 300} Lumipat {check: false}} Hilera {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Tugon 4" lapad: 300} Lumipat {naka-check: false}} Button {text: "Add +" anchors.horizontalCenter: parent.horizontalCenter width: parent.width - 20}}}}

Tingnan natin kung paano ito hitsura:

Kung susubukan natin ngayon ang Mga switch, makikita natin na maaari nating markahan ang lahat ng ito bilang tamang katanungan, at syempre isa lang ang maaaring maging, samakatuwid gagawin namin ang sumusunod: makakabigay kami ng isang identifier sa bawat switch (pati na rin sa mga textfield dahil kailangan naming makuha ang nilalaman upang mai-save ito sa ang database) ayon sa iyong sagot, at kapag na-click namin ito ilalagay namin ang lahat ng iba pa sa naka-check = maling mode:

             Hilera {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Response 1" width: 300} Lumipat {id: sw1 check: false onClicked: {if (sw1.checked == true) {sw2. naka-check = false sw3.checked = false sw4.checked = false}}}}

Kung susubukan natin ito ngayon makikita natin kung paano lamang natin minamarkahan ang isa.