Vytvoření aplikace pro Ubuntu Touch [QML] - [Část 1]

Úvod

Zde přijde řada příspěvků (jako ty, se kterými jsem dělal Vala), ale tentokrát s aplikací pro Ubuntu Touch, aplikace je zpočátku "stejná" jako v příspěvky od Vala, tj. druh hry, kde máme otázku a 4 odpovědi ve formě testu, pak máme tři tlačítka, jedno pro eliminaci dvou z možných odpovědí (50%), další pro zmrazení času a poslední pro jít od otázky.

Chcete-li zjistit, jak zahájit vytváření projektu, můžete navštívit toto zveřejnit (dokumentace, vytvoření projektu ...), protože začneme s již vytvořeným projektem.

Základní znalosti

K vytvoření aplikace použijeme komponenty ubuntuI když jsme si mohli vytvořit vlastní komponenty, v tomto případě to neuděláme.

Komponenty Ubuntu jsou komponenty, které použijeme pro naši aplikaci:

Abychom je mohli používat stejně, musíme modul importovat:

importovat Ubuntu.Components 0.1

V komponentách můžeme najít různé prvky, jako jsou tlačítka, pruhy průběhu atd. Můžeme si stáhnout projekt, kde nám ukáží většinu z těchto komponent:

pobočka bzr lp: ubuntu-ui-toolkit 

Návrh aplikace

Začínáme od obrázku, na kterém máme aplikaci vytvořenou GTK, v tomto případě použijeme QMLve skutečnosti vytvoříme celou aplikaci s Rychle Qt (QML + JavaScript).

Aplikace, stejně jako obrázek, bude sestávat z otázky, času, odpovědí, možností a bodů. Jediný rozdíl (kromě „stylu“) bude ten, že výše budeme mít záložky.

K tomu použijeme prvky button, label a progressBar. Pro konstrukci použijeme Element Sloupec y Řádek.

Návrh rozvržení hlavní obrazovky:

Začínáme s MainView, kde najdete různé záložky, v tomto případě budeme pracovat na rozložení počáteční obrazovky naší aplikace.

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

Rozměry (pro Ubuntu Touch):

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

Definujeme délku a šířku naší aplikace, kde šířka bude 50 (jednotky) a délka 75, nyní ji zbarvíme:

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

Máme barvu záhlaví, těla a zápatí:

Jak jsem již zmínil, aplikace bude strukturována pomocí karet:

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

Jak vidíme, máme dvě karty, jednu komentovanou (zatím jsme ji nevytvořili) a druhou ke hře (kterou nyní vytvoříme). Pro vytvoření uvedené záložky vytvoříme nový soubor qml (Přidat nový -> Qt -> Soubor QML ->…), název uvedeného souboru bude Game.qml.

Pojďme upravit Game.qml takovým způsobem, že z něj uděláme kartu, která má uvnitř stránku (stránku):

importovat QtQuick 2.0 importovat kartu Ubuntu.Components 0.1 {název: stránka i18n.tr („Hra“) {}}

Na stránce začneme strukturovat prvky, které zmiňujeme v návrhu. Sloupec, který bude obsahovat všechny prvky uvnitř (umístí je svisle), pak dáme prvky do pořadí: Label, ProgressBar, 4 tlačítka; a abychom umístili možnosti, použijeme prvek Row k jejich vodorovnému umístění.

Sloupec {anchors.top: Gamepage.top anchors.topMargin: 50 mezer: 15 šířka: 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} Tlačítko {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Tlačítko {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Tlačítko {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Tlačítko {id: resp4 text: "Kotvy Response 4" .horizontalCenter: parent.horizontalCenter} Řádek {řádkování: 15 anchors.horizontalCenter: parent.horizontalCenter Tlačítko {id: b50 text: "50%"} Tlačítko {id: bCon text: "Zmrazit"} Tlačítko {id: b Další text: " Další "}} Řádek {mezery: 15 anchors.horizontalCenter: parent.horizontalCenter Štítek {id: failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : points text: "Points: 0" fontSize: "medium"}}

Podívejme se, jak v rámci každého prvku, který je ohraničen jeho {}, máme různé vlastnosti, v případě štítku a tlačítek vidíme, že vlastnost „text“ je text, který zobrazuje, důležitou nevizuální vlastností je identifikátor "id», který nám pomůže při implementaci logiky aplikace.

Na konci vidíme výsledek: