Rakenduse loomine Ubuntu Touchi jaoks [QML] - [1. osa]

Sissejuhatus

Siit tuleb rida postitusi (nagu need, millega ma tegin Vala), kuid seekord taotlusega Ubuntu Touch, on rakendus algselt "sama" nagu rakenduses postitused kasutajalt Vala, see tähendab, mingi mäng, kus meil on testi vormis küsimus ja 4 vastust, siis on meil kolm nuppu, üks kahe võimaliku vastuse kõrvaldamiseks (50%), teine ​​aja külmutamiseks ja viimane mine küsimusest.

Projekti loomise alustamiseks võite seda külastada pärast (dokumentatsioon, projekti loomine ...), kuna alustame juba loodud projektiga.

Põhiteadmised

Rakenduse loomiseks kasutame selle komponente UbuntuEhkki me saaksime ise oma komponente luua, siis sellisel juhul me seda ei tee.

Ubuntu komponendid on komponendid, mida kasutame oma rakenduse jaoks:

Nende samaks kasutamiseks peame mooduli importima:

importige Ubuntu. Komponendid 0.1

Komponentidest leiame erinevaid elemente, nagu nupud, edenemisribad jne. Saame alla laadida projekti, kus need näitavad meile enamikku neist komponentidest:

bzr haru lp: ubuntu-ui-tööriistakomplekt 

Rakenduse kujundamine

Alustame pildist, kus meil on rakendus tehtud GTK, sel juhul me kasutame QML, tegelikult loome kogu rakenduse Qt Kiire (QML + JavaScript).

Rakendus, nagu ka pilt, koosneb küsimusest, ajast, vastustest, valikutest ja punktidest. Ainus erinevus (välja arvatud "stiil") seisneb selles, et ülal on meil vahelehed.

Selleks kasutame nuppu, silti ja progressBar elemente. Struktuuri jaoks kasutame elementi Veerg y Rida.

Põhiekraani kujunduse kujundamine:

Alustame MainView'st, kus leitakse erinevad vahelehed. Sel juhul töötame oma rakenduse algse ekraani paigutuse kallal.

MainView {objectName: "mainView" // ...}

Mõõtmed (Ubuntu Touchi jaoks):

laius: ühikud.gu (50) kõrgus: ühikud.gu (75)

Määratleme oma rakenduse pikkuse ja laiuse, kus laius on 50 (ühikut) ja pikkus 75, nüüd anname sellele värvi:

headerColor: "# 57365E" backgroundColor: "# A55263" footerColor: "# D75669"

Meil on päise, keha ja jaluse värv:

Nagu ma varem mainisin, on rakendus struktureeritud vahelehtedega:

    Vahekaardid {id: tabs Set {objectName: "jocTab"} / * Lisa {objectName: "addQuestions"} * /}

Nagu näeme, on meil kaks vahelehte, üks kommenteeris (me pole seda veel loonud) ja teine ​​mängimiseks (mille nüüd loome). Nimetatud vahelehe loomiseks loome uue qml-faili (Lisa uus -> Qt -> QML-fail ->…), nimetatud faili nimi on Mäng.qml.

Noh, muutkem Game.qml nii, et muudaksime selle vaheleheks, mille sees on leht (leht):

importige QtQuick 2.0, importige Ubuntu.Komponendid 0.1 vaheleht {title: i18n.tr ("Game") Page {}}

Lehes hakkame struktureerima elemente, mida mainime kujunduses. Veerg, mis sisaldab kõiki selle sees olevaid elemente (see asetab need vertikaalselt), siis paneme elemendid järjekorda: Label, ProgressBar, 4 nuppu; ja valikute lisamiseks kasutame elementi Rida nende horisontaalseks asetamiseks.

Veerg {ankrud.top: Gamepage.top ankrud.topMargin: 50 vahekaugust: 15 laius: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Küsimus?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Nupp {id: resp2 text: "Response 2" ankrud.horizontalCenter: parent.horizontalCenter} Nupp {id: resp3 text: "Response 3" ankrud.horizontalCenter: parent.horizontalCenter} Nupp {id: resp4 text: "Response 4" ankrud .horizontalCenter: parent.horizontalCenter} Rida {vahe: 15 ankrut.horizontalCenter: parent.horizontalCenter Nupp {id: b50 text: "50%"} Nupp {id: bCon text: "Freeze"} Nupp {id: bJärgmine tekst: " Järgmine "}} rida {vahe: 15 ankrut.horizontalCenter: parent.horizontalCenter Label {id: failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : points text: "Points: 0" fontSize: "medium"}}

Vaatame, kuidas igas elemendis, mida piirab tema {}, on erinevad omadused, sildi ja nuppude puhul näeme, et atribuut "text" on tekst, mida see näitab, oluline mitte-visuaalne omadus on identifier "id», mis aitab meil rakendusloogika juurutamisel.

Lõpus näeme tulemust: