Programos, skirtos „Ubuntu Touch“, kūrimas [QML] - [1 dalis]

Įvadas

Čia ateis įrašų serija (kaip su tais, kuriuos dariau Vala), bet šį kartą su paraiška Ubuntu Touch, programa iš pradžių yra tokia pati kaip ir žinutės iš Vala, tai yra, savotiškas žaidimas, kuriame mes turime klausimą ir 4 atsakymus testo forma, tada mes turime tris mygtukus, iš kurių vienas pašalina du galimus atsakymus (50%), kitas sustabdo laiką, o paskutinis - pereiti nuo klausimo.

Norėdami sužinoti, kaip pradėti kurti projektą, galite apsilankyti čia paštu (dokumentacija, sukurk projektą ...), nes pradėsime nuo jau sukurto projekto.

Pagrindinės žinios

Norėdami sukurti programą, naudosime ubuntuNors galėtume sukurti savo komponentus, šiuo atveju to nedarysime.

„Ubuntu“ komponentai yra komponentai, kuriuos naudosime savo programai:

Norėdami juos naudoti tuo pačiu, turime importuoti modulį:

importuoti „Ubuntu“. Komponentai 0.1

Komponentuose galime rasti skirtingų elementų, tokių kaip mygtukai, eigos juostos ir kt. Galime atsisiųsti projektą, kuriame jie rodo daugumą šių komponentų:

bzr filialas lp: ubuntu-ui-toolkit 

Programos kūrimas

Mes pradedame nuo paveikslėlio, kuriame turime paraišką GTK, šiuo atveju mes naudosime QML, iš tikrųjų mes sukursime visą programą naudodami Qt Greita (QML + JavaScript).

Programą, kaip ir vaizdą, sudarys klausimas, laikas, atsakymai, parinktys ir taškai. Vienintelis skirtumas (išskyrus „stilių“) bus tas, kad aukščiau turėsime skirtukus.

Tam naudosime mygtuką, etiketę ir „progressBar“ elementus. Struktūrai naudosime Elementą Skiltis y Eilutė.

Pagrindinio ekrano išdėstymo projektavimas:

Pradedame nuo „MainView“, kur bus rasti skirtingi skirtukai, šiuo atveju mes ketiname dirbti su savo programos pradinio ekrano išdėstymu.

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

Matmenys (skirta „Ubuntu Touch“):

plotis: vienetai.gu (50) aukštis: vienetai.gu (75)

Mes apibrėžiame savo programos ilgį ir plotį, kur plotis bus 50 (vienetai) ir ilgis 75, dabar mes jį spalvinsime:

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

Mes turime antraštės, kūno ir poraštės spalvą:

Kaip jau minėjau anksčiau, programą sudarys skirtukai:

    Skirtukai {id: tabs Set {objectName: "jocTab"} / * Pridėti {objectName: "addQuestions"} * /}

Kaip matome, turime du skirtukus, vienas pakomentavo (mes jo dar nesukūrėme), o kitas - groti (kurį dabar sukursime). Norėdami sukurti minėtą skirtuką, sukursime naują qml failą (Pridėti naują -> Qt -> QML failas -> ...), nurodyto failo pavadinimas bus Žaidimas.qml.

Na, pakeiskime „Game.qml“ taip, kad paverstume jį skirtuku, kurio viduje yra puslapis (puslapis):

importuoti „QtQuick 2.0“ importuoti „Ubuntu.Components 0.1“ skirtuką {title: i18n.tr ("Game") puslapis {}}

Puslapyje mes pradėsime struktūrizuoti elementus, kuriuos paminėjome dizaine. Stulpelis, kuriame bus visi elementai viduje (jis juos pastatys vertikaliai), tada mes išdėstysime elementus eilės tvarka: Etiketė, Pažangos juosta, 4 mygtukai; ir norėdami įdėti parinktis, naudosime elementą Eilutė, kad juos išdėstytume horizontaliai.

Stulpelis {anchors.top: Gamepage.top anchors.topMargin: 50 atstumas: 15 plotis: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Klausimas?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} mygtukas {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Mygtukas {id: resp2 text: "Response 2" inkarai.horizontalCenter: parent.horizontalCenter} Mygtukas {id: resp3 text: "3 atsakymas" inkarai.horizontalCenter: parent.horizontalCenter} mygtukas {id: resp4 text: "4 atsakymas" inkarai .horizontalCenter: parent.horizontalCenter} Eilutė {tarpai: 15 inkarų.horizontalCenter: parent.horizontalCenter mygtukas {id: b50 text: "50%"} mygtukas {id: bCon text: "Freeze"} mygtukas {id: bNext text: " Kitas "}} eilutė {tarpai: 15 anchors.horizontalCenter: parent.horizontalCenter Label {id: failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : points text: "Points: 0" fontSize: "medium"}}

Pažiūrėkime, kaip kiekvieno elemento, kurį riboja jo {}, savybės skiriasi, etiketės ir mygtukų atveju matome, kad ypatybė „tekstas“ yra rodomas tekstas, svarbi ne vizualinė ypatybė yra identifikatorius „id», kuris mums padės įgyvendinant programos logiką.

Pabaigoje galime pamatyti rezultatą: