Vytvorenie aplikácie pre Ubuntu Touch [QML] - [časť 1]

Úvod

Tu príde séria príspevkov (ako tie, s ktorými som robil Vala), ale tentokrát so žiadosťou o Ubuntu Touch, aplikácia je spočiatku „rovnaká“ ako v príspevky od Vala, teda druh hry, kde máme otázku a 4 odpovede formou testu, potom máme tri tlačidlá, jedno na vylúčenie dvoch z možných odpovedí (50%), ďalšie na zastavenie času a posledné na choď od otázky.

Ak chcete zistiť, ako začať s vytváraním projektu, môžete navštíviť túto stránku zverejniť (dokumentácia, vytvorenie projektu ...), keďže začneme s už vytvoreným projektom.

Základné znalosti

Na vytvorenie aplikácie použijeme komponenty ubuntuAj keď by sme si mohli vytvárať vlastné komponenty, v tomto prípade to tak nebude.

Komponenty Ubuntu sú komponenty, ktoré použijeme pre našu aplikáciu:

Aby sme ich mohli rovnako používať, musíme modul importovať:

importovať Ubuntu. Komponenty 0.1

V rámci komponentov nájdeme rôzne prvky, ako sú tlačidlá, ukazovatele priebehu atď. Môžeme si stiahnuť projekt, kde nám ukážu väčšinu z týchto komponentov:

pobočka bzr lp: ubuntu-ui-toolkit 

Návrh aplikácie

Vychádzame z obrázka, na ktorom máme aplikáciu urobenú GTK, v tomto prípade použijeme QML, v skutočnosti celú aplikáciu vytvoríme pomocou Qt rýchle (QML + JavaScript).

Aplikácia, podobne ako obrázok, bude pozostávať z otázky, času, odpovedí, možností a bodov. Jediný rozdiel (okrem „štýlu“) bude v tom, že vyššie budeme mať karty.

Použijeme na to prvky button, label a progressBar. Pre štruktúru použijeme Element Stĺpec y Riadok

Návrh rozloženia hlavnej obrazovky:

Začíname s MainView, kde sa nájdu rôzne karty, v tomto prípade budeme pracovať na rozložení úvodnej obrazovky našej aplikácie.

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

Rozmery (pre Ubuntu Touch):

šírka: units.gu (50) výška: units.gu (75)

Definujeme dĺžku a šírku našej aplikácie, kde šírka bude 50 (jednotky) a dĺžka 75, teraz ju zafarbíme:

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

Máme farbu hlavičky, tela a päty:

Ako som už spomínal, aplikácia bude štruktúrovaná podľa kariet:

    Karty {id: tabs Set {objectName: "jocTab"} / * Add {objectName: "addQuestions"} * /}

Ako vidíme, máme dve karty, jednu komentovanú (zatiaľ sme ju nevytvorili) a druhú na hranie (ktorú teraz vytvoríme). Ak chcete vytvoriť uvedenú kartu, vytvoríme nový súbor qml (Pridať nový -> Qt -> Súbor QML -> ...), názov uvedeného súboru bude Game.qml.

Poďme teda upraviť Game.qml tak, aby sme z neho urobili kartu, ktorá má vo vnútri stránku (Page):

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: stránka i18n.tr ("Hra") {}}

V rámci stránky začneme štruktúrovať prvky, ktoré spomenieme v dizajne. Stĺpec, ktorý bude obsahovať všetky prvky vo vnútri (umiestni ich zvisle), potom dáme prvky do poradia: Label, ProgressBar, 4 tlačidlá; a na umiestnenie volieb použijeme prvok Riadok na ich vodorovné umiestnenie.

Stĺpec {anchors.top: Gamepage.top anchors.topMargin: 50 medzery: 15 šírka: parent.width výška: 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} Button {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp4 text: "kotvy Response 4" .horizontalCenter: parent.horizontalCenter} Riadok {medzery: 15 anchors.horizontalCenter: parent.horizontalCenter Tlačidlo {id: b50 text: "50%"} Tlačidlo {id: bCon text: "Zmraziť"} Tlačidlo {id: b Ďalší text: " Ďalej "}} Riadok {medzery: 15 anchors.horizontalCenter: parent.horizontalCenter Štítok {id: failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : points text: "Body: 0" fontSize: "medium"}}

Pozrime sa, ako v rámci každého prvku, ktorý je ohraničený jeho {}, máme odlišné vlastnosti, v prípade štítku a tlačidiel vidíme, že vlastnosť „text“ je text, ktorý zobrazuje, dôležitou nevizuálnou vlastnosťou je identifikátor "id", ktorý nám pomôže pri implementácii aplikačnej logiky.

Na konci vidíme výsledok: