Oprettelse af en app til Ubuntu Touch [QML] - [Del 1]

Indledning

Her kommer en række indlæg (som dem jeg gjorde med Vala), men denne gang med en ansøgning om Ubuntu Touch, er applikationen oprindeligt den "samme" som i indlæg fra Vala, det vil sige en slags spil, hvor vi har et spørgsmål og 4 svar i form af en test, så har vi tre knapper, en til at eliminere to af de mulige svar (50%), en anden til at fryse tid og den sidste til gå fra spørgsmål.

For at se, hvordan du starter oprettelsen af ​​et projekt, kan du besøge dette indlæg (dokumentation, opret projekt ...), da vi starter med det allerede oprettede projekt.

Basis viden

For at oprette appen bruger vi komponenterne i UbuntuSelvom vi kunne oprette vores egne komponenter, gør vi det ikke i dette tilfælde.

Ubuntu-komponenter er komponenter, som vi vil bruge til vores app:

For at bruge dem på samme måde skal vi importere modulet:

importere Ubuntu.Komponenter 0.1

Vi kan finde forskellige elementer inden for komponenterne, såsom knapper, statusbjælker osv. Vi kan downloade et projekt, hvor de viser os de fleste af disse komponenter:

bzr gren lp: ubuntu-ui-toolkit 

Design af appen

Vi starter fra billedet, hvor vi har applikationen lavet med GTK, i dette tilfælde bruger vi QMLfaktisk opretter vi hele applikationen med Qt hurtig (QML + JavaScript).

Applikationen, som billedet, vil bestå af et spørgsmål, tid, svar, valgmuligheder og punkter. Den eneste forskel (bortset fra "stil") er, at vi ovenfor har faner.

Til dette vil vi bruge knappen, etiketten og progressBar-elementerne. Til strukturen bruger vi elementet Kolonne y Række.

Design af hovedskærmens layout:

Vi starter med en MainView, hvor forskellige faner findes, i dette tilfælde skal vi arbejde på layoutet af startskærmen i vores app.

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

Dimensioner (til Ubuntu Touch):

bredde: enheder.gu (50) højde: enheder.gu (75)

Vi definerer længden og bredden af ​​vores applikation, hvor bredden vil være 50 (enheder) og længden 75, nu skal vi give den farve:

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

Vi har farven på sidehovedet, kroppen og sidefoden:

Som jeg nævnte før, vil applikationen være struktureret af faner:

    Faner {id: faner Indstil {objectName: "jocTab"} / * Tilføj {objectName: "addQuestions"} * /}

Som vi ser har vi to faner, en kommenterede (vi har ikke oprettet den endnu) og en anden til at spille (som vi nu opretter). For at oprette den nævnte fane opretter vi en ny qml-fil (Tilføj ny -> Qt -> QML-fil -> ...), navnet på den pågældende fil vil være Game.qml.

Lad os ændre Game.qml på en sådan måde, at vi gør det til en fane, som indeni har en side (side):

import QtQuick 2.0 import Ubuntu.Components 0.1 Fane {title: i18n.tr ("Game") Side {}}

Inden for siden begynder vi at strukturere de elementer, som vi nævner i designet. En kolonne, der inkluderer alle elementerne indeni (det placerer dem lodret), så sætter vi elementerne i rækkefølge: Etiket, ProgressBar, de 4 knapper; og for at sætte indstillingerne bruger vi rækkeelementet til at placere dem vandret.

Kolonne {anchors.top: Gamepage.top anchors.topMargin: 50 mellemrum: 15 bredde: parent.width højde: parent.height - 50 Label {id: spørgsmål anchors.topMargin: 500 tekst: "Spørgsmå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} Knap {id: resp2 tekst: "Svar 2" anchors.horizontalCenter: parent.horizontalCenter} Knap {id: resp3 tekst: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Knap {id: resp4 tekst: "Response 4" ankre .horizontalCenter: parent.horizontalCenter} Række {afstand: 15 anchors.horizontalCenter: parent.horizontalCenter-knap {id: b50 tekst: "50%"} Knap {id: bCon tekst: "Frys"} -knap {id: bNæste tekst: " Næste "}} Række {afstand: 15 anchors.horizontalCenter: parent.horizontalCenter-etiket {id: fejltekst:" Fejl: 0 "farve:" rød "} Etiket {id: hits tekst:" Hit: 0 "} Etiket {id : point tekst: "Points: 0" fontSize: "medium"}}

Lad os se, hvordan vi inden for hvert element, der er afgrænset af dets {}, har forskellige egenskaber. I tilfælde af etiketten og knapperne kan vi se, at "tekst" -egenskaben er den tekst, den viser, en vigtig ikke-visuel egenskab er identifikator "id", Som vil hjælpe os, når vi implementerer applikationslogikken.

I slutningen kan vi se resultatet: