Ustvarjanje aplikacije za Ubuntu Touch [QML] - [1. del]

uvod

Tu bo prišla vrsta objav (kot tiste, ki sem jih delal s Vala), tokrat pa s prijavo za Ubuntu Touch, je aplikacija na začetku "enaka" kot v objave od Vala, to je nekakšna igra, kjer imamo vprašanje in 4 odgovore v obliki testa, nato imamo tri gumbe, enega za odpravo dveh možnih odgovorov (50%), drugega za zamrznitev časa in zadnjega, ki gre iz vprašanje.

Če želite videti, kako začeti ustvarjati projekt, ga lahko obiščete objava (dokumentacija, izdelaj projekt ...), saj bomo začeli z že ustvarjenim projektom.

Osnovno znanje

Za ustvarjanje aplikacije bomo uporabili komponente UbuntuČeprav bi lahko ustvarili lastne komponente, tega v tem primeru ne bomo.

Ubuntu Components so komponente, ki jih bomo uporabili za našo aplikacijo:

Če jih želimo uporabljati enako, moramo uvoziti modul:

uvoz Ubuntu.Components 0.1

V komponentah najdemo različne elemente, kot so gumbi, vrstice napredovanja itd. Lahko prenesemo projekt, kjer nam prikažejo večino teh komponent:

bzr podružnica lp: ubuntu-ui-toolkit 

Oblikovanje aplikacije

Izhajamo iz slike, na kateri imamo izdelano aplikacijo GTK, v tem primeru bomo uporabili QML, celotno aplikacijo bomo ustvarili z Qt Hitro (QML + JavaScript).

Aplikacija, tako kot slika, bo sestavljena iz vprašanja, časa, odgovorov, možnosti in točk. Edina razlika (razen "sloga") bo ta, da bomo imeli zavihke na vrhu.

Za to bomo uporabili elemente gumba, nalepke in progressBar. Za strukturo bomo uporabili element Stolpec y Vrstica.

Oblikovanje postavitve glavnega zaslona:

Začnemo z MainView, kjer bodo najdeni različni zavihki, v tem primeru bomo delali na postavitvi začetnega zaslona naše aplikacije.

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

Mere (za Ubuntu Touch):

širina: enote.gu (50) višina: enote.gu (75)

Določimo dolžino in širino naše aplikacije, kjer bo širina 50 (enot) in dolžina 75, zdaj jo bomo pobarvali:

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

Imamo barvo glave, telesa in noge:

Kot sem že omenil, bo vloga strukturirana po jezičkih:

    Tabs {id: tabs Set {objectName: "jocTab"} / * Dodaj {objectName: "addQuestions"} * /}

Kot vidimo, imamo dva zavihka, enega je komentiral (še ga nismo ustvarili) in drugega za predvajanje (ki ga bomo zdaj ustvarili). Če želite ustvariti omenjeni zavihek, bomo ustvarili novo datoteko qml (Dodaj novo -> Qt -> Datoteka QML -> ...), ime datoteke bo Game.qml.

No, spremenimo Game.qml tako, da ga spremenimo v zavihek, v katerem je stran (Page):

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

Na strani bomo začeli strukturirati elemente, ki jih omenjamo pri oblikovanju. Stolpec, ki bo vseboval vse elemente znotraj (postavil jih bo navpično), nato bomo elemente postavili v vrstni red: Oznaka, ProgressBar, 4 gumbi; in za postavitev možnosti bomo uporabili element Vrstica, da jih postavimo vodoravno.

Stolpec {anchors.top: Gamepage.top anchors.topMargin: 50 presledkov: 15 width: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Question?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Gumb {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Gumb {id: resp2 text: "Response 2" sidra.horizontalCenter: parent.horizontalCenter} Gumb {id: resp3 text: "Response 3" sidra.horizontalCenter: parent.horizontalCenter} Gumb {id: resp4 text: "Response 4" sidra .horizontalCenter: parent.horizontalCenter} Vrstica {razmik: 15 sidrišč.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50%"} Button {id: bCon text: "Freeze"} Button {id: bNext text: " Naprej "}} Vrstica {razmik: 15 sidrišč.horizontalCenter: nadrejeni.horizontalCenter Oznaka {id: besedila napak:" Napake: 0 "barva:" rdeča "} Oznaka {id: zadetki besedila:" Zadetek: 0 "} Oznaka {id : besedilo točk: "Točke: 0" fontSize: "medium"}}

Poglejmo, kako imamo znotraj vsakega elementa, ki je ločen s {}, različne lastnosti, pri oznaki in gumbih lahko vidimo, da je lastnost "besedilo" besedilo, ki ga prikazuje, pomembna ne-vizualna lastnost je identifikator "id" », Kar nam bo pomagalo, ko bomo implementirali logiko aplikacije.

Na koncu lahko vidimo rezultat: