Opprette en app for Ubuntu Touch [QML] - [Del 1]

Innledning

Her kommer en serie innlegg (som de jeg gjorde med Vala), men denne gangen med en søknad om Ubuntu Touch, applikasjonen er opprinnelig den "samme" som i innlegg fra Vala, det vil si et slags spill der vi har et spørsmål og 4 svar i form av en test, så har vi tre knapper, en for å eliminere to av de mulige svarene (50%), en annen for å fryse tid og den siste til gå fra spørsmål.

For å se hvordan du begynner å lage et prosjekt, kan du besøke dette poste (dokumentasjon, opprett prosjekt ...), siden vi vil starte med prosjektet som allerede er opprettet.

Grunnleggende kunnskap

For å lage appen vil vi bruke komponentene i UbuntuSelv om vi kunne lage våre egne komponenter, vil vi ikke i dette tilfellet.

Ubuntu-komponenter er komponenter som vi vil bruke til appen vår:

For å bruke dem på samme måte må vi importere modulen:

importere Ubuntu.Components 0.1

Vi kan finne forskjellige elementer i komponentene, for eksempel knapper, fremdriftslinjer etc. Vi kan laste ned et prosjekt der de viser oss de fleste av disse komponentene:

bzr gren lp: ubuntu-ui-toolkit 

Designe appen

Vi starter fra bildet der vi har laget applikasjonen med GTK, i dette tilfellet vil vi bruke QML, faktisk lager vi hele applikasjonen med Qt Rask (QML + Javascript).

Applikasjonen, som bildet, vil bestå av et spørsmål, tid, svar, alternativer og poeng. Den eneste forskjellen (bortsett fra "stilen"), er at vi vil ha faner øverst.

For dette vil vi bruke knapp, etikett og progressBar-elementer. For strukturen vil vi bruke elementet Kolonne y Rad.

Designe utformingen av hovedskjermen:

Vi starter med en MainView, der forskjellige faner blir funnet. I dette tilfellet skal vi jobbe med utformingen av startskjermen til appen vår.

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

Dimensjoner (for Ubuntu Touch):

bredde: units.gu (50) høyde: units.gu (75)

Vi definerer lengden og bredden på applikasjonen vår, hvor bredden vil være 50 (enheter) og lengden 75, nå skal vi farge den:

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

Vi har fargen på topptekst, kropp og bunntekst:

Som jeg nevnte tidligere, vil applikasjonen være strukturert av faner:

    Faner {id: faner Angi {objectName: "jocTab"} / * Legg til {objectName: "addQuestions"} * /}

Som vi ser har vi to faner, en kommenterte (vi har ikke opprettet den ennå) og en annen å spille (som vi nå vil lage). For å opprette nevnte fane, oppretter vi en ny qml-fil (Legg til ny -> Qt -> QML-fil -> ...), navnet på filen vil være Game.qml.

Vel, la oss endre Game.qml på en slik måte at vi gjør det om til en fane, som inne har en side (side):

importere QtQuick 2.0 importere Ubuntu.Components 0.1 Tab {title: i18n.tr ("Game") Page {}}

Innenfor siden begynner vi å strukturere elementene vi nevner i designet. En kolonne som vil inneholde alle elementene inni (den vil sette dem vertikalt), så vil vi sette elementene i rekkefølge: Etikett, ProgressBar, de 4 knappene; og for å sette alternativene, vil vi bruke radelementet til å sette dem horisontalt.

Kolonne {anchors.top: Gamepage.top anchors.topMargin: 50 avstand: 15 bredde: parent.width høyde: parent.height - 50 Etikett {id: spørsmål anchors.topMargin: 500 tekst: "Spørsmål?" 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} Button {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp4 text: "Response 4" anchors .horizontalCenter: parent.horizontalCenter} Rad {avstand: 15 anchors.horizontalCenter: parent.horizontalCenter-knapp {id: b50 tekst: "50%"} Knapp {id: bCon tekst: "Frys"} Knapp {id: bNeste tekst: " Neste "}} Rad {avstand: 15 anchors.horizontalCenter: parent.horizontalCenter-etikett {id: feil tekst:" Feil: 0 "farge:" rød "} Etikett {id: treffer tekst:" Treff: 0 "} Etikett {id : poengtekst: "Poeng: 0" fontSize: "medium"}}

La oss se hvordan innenfor hvert element som er avgrenset av dets {} vi har forskjellige egenskaper. Når det gjelder etiketten og knappene, kan vi se at "tekst" -egenskapen er teksten den viser, en viktig ikke-visuell egenskap er identifier "id", Som vil hjelpe oss når vi implementerer applikasjonslogikken.

På slutten kan vi se resultatet: