Krijimi i një aplikacioni për Ubuntu Touch [QML] - [Pjesa 1]

paraqitje

Këtu do të vijnë një seri postimesh (si ato me të cilat bëra Vala), por kësaj here me një aplikim për Ubuntu prekje, aplikimi fillimisht është "i njëjti" si në postime nga Vala, domethënë një lloj loje ku kemi një pyetje dhe 4 përgjigje në formën e një testi, atëherë kemi tre butona, një për të eleminuar dy nga përgjigjet e mundshme (50%), një tjetër për të ngrirë kohën dhe e fundit për të shko nga pyetja

Për të parë se si të filloni krijimin e një projekti, mund ta vizitoni këtë post (dokumentacion, krijoni projekt ...), pasi që ne do të fillojmë me projektin e krijuar tashmë.

Njohuri themelore

Për të krijuar aplikacionin ne do të përdorim përbërësit e UbuntuNdërsa ne mund të krijojmë përbërësit tanë, ne nuk do ta bëjmë në këtë rast.

Komponentët e Ubuntu janë përbërës që do të përdorim për aplikacionin tonë:

Për t'i përdorur ato njësoj duhet të importojmë modulin:

importoni Ubuntu.Komponentët 0.1

Ne mund të gjejmë elementë të ndryshëm brenda përbërësve, siç janë butonat, shiritat e përparimit etj. Ne mund të shkarkojmë një projekt ku ato na tregojnë shumicën e këtyre përbërësve:

dega bzr lp: ubuntu-ui-vegla pune 

Projektimi i aplikacionit

Ne fillojmë nga imazhi ku kemi bërë aplikimin GTK, në këtë rast do të përdorim QML, në fakt ne do të krijojmë të gjithë aplikacionin me Qt Shpejt (QML + JavaScript).

Aplikacioni, si imazhi, do të përbëhet nga një pyetje, kohë, përgjigje, opsione dhe pikë. I vetmi ndryshim (përveç "stilit"), do të jetë se ne do të kemi Skeda në krye.

Për këtë ne do të përdorim butonin, etiketën dhe elementet e progresitBar. Për strukturën do të përdorim Elementin Kolonë y Rresht

Projektimi i faqosjes së ekranit kryesor:

Ne fillojmë me një MainView, ku do të gjenden Skeda të ndryshme, në këtë rast do të punojmë për paraqitjen e ekranit fillestar të aplikacionit tonë.

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

Përmasat (për Ubuntu Touch):

gjerësia: njësitë.gu (50) lartësia: njësitë.gu (75)

Ne përcaktojmë gjatësinë dhe gjerësinë e aplikacionit tonë, ku gjerësia do të jetë 50 (njësi) dhe gjatësia 75, tani do t'i japim ngjyrën:

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

Ne kemi ngjyrën e kokës, trupit dhe fundin:

Siç e përmenda më parë, aplikacioni do të strukturohet nga Skedat:

    Skedat {id: skedat Vendosni {objectName: "jocTab"} / * Shtoni {objectName: "addQuestions"} * /}

Siç mund ta shohim kemi dy Skeda, një i komentuar (ende nuk e kemi krijuar) dhe një tjetër për të luajtur (të cilin tani do ta krijojmë). Për të krijuar Tab-in e përmendur, ne do të krijojmë një skedar të ri qml (Shto të ri -> Qt -> Skedar QML ->…), emri i skedarit të përmendur do të jetë Game.qml.

Epo, le ta modifikojmë Game.qml në një mënyrë të tillë që ta kthejmë atë në një Tab, i cili brenda ka një faqe (Faqja):

importo QtQuick 2.0 importo Ubuntu.Komponentët 0.1 Tab {titulli: i18n.tr ("Lojë") Faqja {}}

Brenda faqes ne do të fillojmë të strukturojmë elementet që përmendim në dizajn. Një kolonë që do të përfshijë të gjithë elementët brenda (do t'i vendosë ato vertikalisht), atëherë ne do t'i vendosim elementet në rregull: Label, ProgressBar, 4 butonat; dhe për të vendosur opsionet, ne do të përdorim elementin Row për t'i vendosur ato horizontalisht.

Kolona {anchors.top: Gamepage.top anchors.topMargina: 50 ndarje: 15 gjerësi: prindi.lëndësia gjerësia: prindi.lidhja - 50 Etiketa {id: pyetja anchors.topMargin: 500 teksti: "Pyetja?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: prind.horizontalCenter} Butoni {id: resp1 teksti: "Përgjigja 1" spirancat.horizontalCenter: prind.horizontalCenter} Butoni {id: resp2 teksti: spirancat.horizontalCenter: prind.horizontalCenter} Butoni {id: resp2 teksti: "Përgjigja 3" spirancat.horizontalCenter: prind.horizontalCenter} Butoni {id: resp3 teksti: "Përgjigja 4" .horizontalCenter: parent.horizontalCenter} Rreshti {spacing: 4 anchors.horizontalCenter: parent.horizontalCenter Butoni {id: b15 text: "50%"} Butoni {id: bCon text: "Freeze"} Butoni {id: bTeksti tjetër: " Tjetra "}} Rreshti {spacing: 50 anchors.horizontalCenter: parent.horizontalCenter Etiketa {id: dështimet teksti:" Dështimet: 15 "ngjyra:" e kuqe "} Etiketa {id: godet tekstin:" Hit: 0 "} Etiketa {id : teksti i pikave: "Pikët: 0" fontSize: "medium"}}

Le të shohim se si brenda secilit element që përcaktohet nga {} i tij kemi veti të ndryshme, në rastin e etiketës dhe butonave mund të shohim se vetia "teksti" është teksti që tregon, një veti e rëndësishme jo-vizuale është identifikues "id", i cili do të na ndihmojë kur zbatojmë logjikën e aplikimit.

Në fund mund të shohim rezultatin: