Skapa en app för Ubuntu Touch [QML] - [Del 1]

Inledning

Här kommer en serie inlägg (som de jag gjorde med Vala), men den här gången med en ansökan om Ubuntu Touchär applikationen initialt "samma" som i inlägg från Vala, det vill säga ett slags spel där vi har en fråga och fyra svar i form av ett test, då har vi tre knappar, en för att eliminera två av de möjliga svaren (4%), en annan för att frysa tiden och den sista för att gå från fråga.

För att se hur du börjar skapa ett projekt kan du besöka detta inlägg (dokumentation, skapa projekt ...), eftersom vi börjar med det redan skapade projektet.

Grundläggande kunskap

För att skapa appen använder vi komponenterna i ubuntuÄven om vi kunde skapa egna komponenter kommer vi inte att göra det i det här fallet.

Ubuntu-komponenter är komponenter som vi kommer att använda för vår app:

För att använda dem på samma sätt måste vi importera modulen:

importera Ubuntu.Components 0.1

Vi kan hitta olika element inom komponenterna, såsom knappar, framstegsfält etc. Vi kan ladda ner ett projekt där de visar oss de flesta av dessa komponenter:

bzr gren lp: ubuntu-ui-toolkit 

Designa appen

Vi börjar från bilden där vi har ansökan gjord med GTK, i det här fallet kommer vi att använda QML, faktiskt kommer vi att skapa hela applikationen med Qt Snabb (QML + JavaScript).

Applikationen, som bilden, kommer att bestå av en fråga, tid, svar, alternativ och poäng. Den enda skillnaden (förutom "stil") är att vi kommer att ha flikar högst upp.

För detta kommer vi att använda knapp-, etikett- och progressBar-elementen. För strukturen kommer vi att använda elementet Kolumn y Rad.

Designa layouten på huvudskärmen:

Vi börjar med en MainView, där olika flikar kommer att hittas, i det här fallet ska vi arbeta med layouten på startskärmen för vår app.

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

Mått (för Ubuntu Touch):

bredd: enheter.gu (50) höjd: enheter.gu (75)

Vi definierar längden och bredden på vår applikation, där bredden blir 50 (enheter) och längden 75, nu ska vi färga den:

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

Vi har färgen på sidhuvudet, kroppen och sidfoten:

Som jag nämnde tidigare kommer applikationen att struktureras av flikar:

    Flikar {id: flikar Ställ in {objectName: "jocTab"} / * Lägg till {objectName: "addQuestions"} * /}

Som vi ser har vi två flikar, en kommenterade (vi har inte skapat den ännu) och en annan att spela (som vi nu kommer att skapa). För att skapa nämnda flik skapar vi en ny qml-fil (Lägg till ny -> Qt -> QML-fil -> ...), namnet på filen kommer att vara Game.qml.

Tja, låt oss modifiera Game.qml på ett sådant sätt att vi gör det till en flik, som inuti har en sida (sida):

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

Inom sidan börjar vi strukturera de element som vi nämner i designen. En kolumn som innehåller alla element inuti (det kommer att placera dem vertikalt), sedan kommer vi att ordna elementen i ordning: Etikett, ProgressBar, de 4 knapparna; och för att sätta alternativen använder vi radelementet för att placera dem horisontellt.

Kolumn {anchors.top: Gamepage.top anchors.topMargin: 50 mellanslag: 15 bredd: parent.widthöjd: parent.height - 50 Etikett {id: fråga anchors.topMargin: 500 text: "Fråga?" 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} Knapp {id: resp2 text: "Svar 2" anchors.horizontalCenter: parent.horizontalCenter} Knapp {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Knapp {id: resp4 text: "Response 4" ankare .horizontalCenter: parent.horizontalCenter} Rad {avstånd: 15 anchors.horizontalCenter: parent.horizontalCenter-knapp {id: b50 text: "50%"} Knapp {id: bCon text: "Freeze"} Knapp {id: b Nästa text: " Nästa "}} Rad {avstånd: 15 anchors.horizontalCenter: parent.horizontalCenter Etikett {id: misslyckande text:" Fel: 0 "färg:" röd "} Etikett {id: träffar text:" Hit: 0 "} Etikett {id : poängtext: "Poäng: 0" fontSize: "medium"}}

Låt oss se hur inom varje element som avgränsas av dess {} vi har olika egenskaper, när det gäller etiketten och knapparna kan vi se att "text" -egenskapen är texten den visar, en viktig icke-visuell egenskap är identifierare "id", vilket hjälper oss när vi implementerar applikationslogiken.

I slutet kan vi se resultatet: