Създаване на приложение за Ubuntu Touch [QML] - [Част 1]

Въвеждане

Тук ще дойде поредица от публикации (като тези, с които направих Вала), но този път с приложение за Ubuntu Touch, приложението първоначално е "същото" като в публикации от Вала, тоест вид игра, при която имаме въпрос и 4 отговора под формата на тест, след това имаме три бутона, един за елиминиране на два от възможните отговори (50%), друг за замразяване на времето и последен за преминаване от въпрос.

За да видите как да започнете да създавате проект, можете да го посетите пускат (документация, създаване на проект ...), тъй като ще започнем с вече създадения проект.

Основни знания

За да създадем приложението, ще използваме компонентите на UbuntuВъпреки че бихме могли да създадем свои собствени компоненти, в този случай няма да го направим.

Компонентите на Ubuntu са компоненти, които ще използваме за нашето приложение:

За да ги използваме по същия начин, трябва да импортираме модула:

импортиране на Ubuntu.Components 0.1

Можем да намерим различни елементи в компонентите, като бутони, ленти за напредък и т.н. Можем да изтеглим проект, където ни показват повечето от тези компоненти:

bzr клон lp: ubuntu-ui-toolkit 

Проектиране на приложението

Започваме от изображението, където сме направили приложението GTK, в този случай ще използваме QML, всъщност ще създадем цялото приложение с Qt Бързо (QML + JavaScript).

Приложението, подобно на изображението, ще се състои от въпрос, време, отговори, опции и точки. Единствената разлика (освен "стила") ще бъде, че по-горе ще имаме раздели.

За това ще използваме елементите бутон, етикет и progressBar. За структурата ще използваме Елемента Колона y Ред.

Проектиране на оформлението на главния екран:

Започваме с MainView, където ще бъдат намерени различни раздели, в този случай ще работим по оформлението на началния екран на нашето приложение.

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

Размери (за Ubuntu Touch):

ширина: единици.gu (50) височина: единици.гу (75)

Определяме дължината и ширината на нашето приложение, където ширината ще бъде 50 (единици) и дължината 75, сега ще го оцветим:

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

Имаме цвета на заглавката, тялото и долния колонтитул:

Както споменах преди, приложението ще бъде структурирано от Tabs:

    Tabs {id: tabs Set {objectName: "jocTab"} / * Добавяне на {objectName: "addQuestions"} * /}

Както виждаме, имаме два раздела, един коментиран (все още не сме го създали) и друг за възпроизвеждане (който сега ще създадем). За да създадем споменатия раздел, ще създадем нов qml файл (Добавяне на нов -> Qt -> QML файл -> ...), името на споменатия файл ще бъде Game.qml.

Е, нека модифицираме Game.qml по такъв начин, че да го превърнем в Tab, който вътре има страница (Page):

импортиране на QtQuick 2.0 импортиране на Ubuntu.Components 0.1 Tab {title: i18n.tr ("Game") Страница {}}

В рамките на страницата ще започнем да структурираме елементите, които споменаваме в дизайна. Колона, която ще включва всички елементи вътре (ще ги постави вертикално), след това ще сложим елементите в ред: Label, ProgressBar, 4-те бутона; и за да поставим опциите, ще използваме елемента Ред, за да ги поставим хоризонтално.

Колона {anchors.top: Gamepage.top anchors.topMargin: 50 интервал: 15 ширина: parent.width височина: parent.height - 50 Етикет {id: question anchors.topMargin: 500 текст: "Въпрос?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Бутон {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Бутон {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Бутон {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Бутон {id: resp4 text: "Response 4" anchors .horizontalCenter: parent.horizontalCenter} Ред {интервал: 15 котви.horizontalCenter: parent.horizontalCenter Бутон {id: b50 text: "50%"} Бутон {id: bCon text: "Freeze"} Бутон {id: bСледващ текст: " Следващ "}} Ред {интервал: 15 anchors.horizontalCenter: parent.horizontalCenter Етикет {id: неуспехи текст:" Неуспехи: 0 "цвят:" червен "} Етикет {id: удари текст:" Попадение: 0 "} Етикет {id : точки текст: "Точки: 0" fontSize: "среден"}}

Нека да видим как в рамките на всеки елемент, който е разграничен от неговата {}, имаме различни свойства, в случая на етикета и бутоните можем да видим, че свойството "text" е текстът, който показва, важно невизуално свойство е идентификаторът "id" », Което ще ни помогне, когато внедрим логиката на приложението.

В края можем да видим резултата: