Skep 'n app vir Ubuntu Touch [QML] - [Deel 1]

inleiding

Hier sal 'n reeks plasings kom (soos dié waarmee ek gedoen het vala), maar hierdie keer met 'n aansoek vir Ubuntu Touch, die aansoek is aanvanklik "dieselfde" as in die plasings van vala, dit wil sê 'n soort speletjie waar ons 'n vraag en 4 antwoorde in die vorm van 'n toets het, dan het ons drie knoppies, een om twee van die moontlike antwoorde (50%) uit te skakel, een om tyd te vries en die laaste om gaan van vraag af.

U kan hierdie besoek om te sien hoe u 'n projek kan begin skep pos (dokumentasie, skep projek ...), aangesien ons sal begin met die reeds geskepte projek.

Algemene kennis

Om die app te skep, gebruik ons ​​die komponente van UbuntuAlhoewel ons ons eie komponente kon skep, sal ons dit nie doen nie.

Ubuntu-komponente is komponente wat ons vir ons app sal gebruik:

Om hulle dieselfde te gebruik, moet ons die module invoer:

voer Ubuntu.Components 0.1 in

Ons kan verskillende elemente binne die komponente vind, soos knoppies, vorderingsbalkies, ens. Ons kan 'n projek aflaai waar ons die meeste van hierdie komponente wys:

bzr tak lp: ubuntu-ui-toolkit 

Ontwerp die app

Ons begin by die prentjie waarmee ons die aansoek maak GTK, in hierdie geval sal ons gebruik QML, in werklikheid sal ons die hele aansoek met Qt vinnig (QML + JavaScript).

Die toepassing, soos die afbeelding, sal bestaan ​​uit 'n vraag, tyd, antwoorde, opsies en punte. Die enigste verskil (behalwe vir die "styl"), is dat hierbo Tabs sal hê.

Hiervoor gebruik ons ​​die knoppie-, etiket- en progressBar-elemente. Vir die struktuur sal ons die Element gebruik Kolom y Roei.

Ontwerp die uitleg van die hoofskerm:

Ons begin met 'n MainView, waar verskillende oortjies gevind sal word, in hierdie geval gaan ons werk aan die uitleg van die eerste skerm van ons app.

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

Afmetings (vir Ubuntu Touch):

breedte: eenhede.gu (50) hoogte: eenhede.gu (75)

Ons definieer die lengte en breedte van ons toepassing, waar die breedte 50 (eenhede) en die lengte 75 sal wees, nou gaan ons dit kleur gee:

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

Ons het die kleur van die koptekst, liggaam en voetskrif:

Soos ek vroeër genoem het, sal die aansoek deur tabs gestruktureer word:

    Tabs {id: tabs Stel {objectName: "jocTab"} / * Voeg {objectName: "addQuestions"} * /} by

Soos ons kan sien, het ons twee oortjies, een het kommentaar gelewer (ons het dit nog nie geskep nie) en een om te speel (wat ons nou sal skep). Om die genoemde oortjie te skep, sal ons 'n nuwe qml-lêer skep (voeg nuwe by -> Qt -> QML-lêer -> ...), die naam van die lêer is Game.qml.

Wel, laat ons Game.qml so verander dat ons dit in 'n oortjie verander wat 'n bladsy (bladsy) bevat:

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

Binne die bladsy sal ons die elemente begin struktureer wat ons in die ontwerp noem. 'N Kolom wat al die elemente binne bevat (dit sal dit vertikaal plaas), dan sal ons die elemente in volgorde plaas: Label, ProgressBar, die 4 knoppies; en om die opsies te stel, sal ons die Row-element gebruik om dit horisontaal te plaas.

Kolom {anchors.top: Gamepage.top anchors.topMargin: 50 spasiëring: 15 breedte: parent.width hoogte: parent.height - 50 Label {id: vraag anchors.topMargin: 500 teks: "Vraag?" 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" ankers .horizontalCenter: parent.horizontalCenter} Ry {spasiëring: 15 anchors.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50%"} Button {id: bCon text: "Freeze"} Button {id: bVolgende teks: " Volgende "}} Rij {spasiëring: 15 anchors.horizontalCenter: parent.horizontalCenter-etiket {id: mislukkings teks:" Foute: 0 "kleur:" rooi "} Etiket {id: treffers teks:" Treffer: 0 "} Label {id : punte teks: "Punte: 0" fontGrootte: "medium"}}

Kom ons kyk hoe binne elke element wat afgebaken word deur sy {} verskillende eienskappe het, in die geval van die etiket en die knoppies kan ons sien dat die "teks" -eigenskap die teks is wat dit toon, 'n belangrike nie-visuele eienskap is identifier "id", wat ons sal help wanneer ons die toepassingslogika implementeer.

Aan die einde kan ons die resultaat sien: