Створення програми для Ubuntu Touch [QML] - [Частина 1]

Введення

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

Щоб побачити, як розпочати створення проекту, ви можете відвідати це після (документація, створити проект ...), оскільки ми почнемо з уже створеного проекту.

Базові знання

Для створення програми ми будемо використовувати компоненти UbuntuХоча ми могли б створювати власні компоненти, в цьому випадку ми цього не зробимо.

Компоненти Ubuntu - це компоненти, які ми будемо використовувати для нашого додатку:

Щоб використовувати їх однаково, нам потрібно імпортувати модуль:

імпортувати Ubuntu.Components 0.1

В межах компонентів ми можемо знайти різні елементи, такі як кнопки, індикатори виконання тощо. Ми можемо завантажити проект, де вони показують нам більшість із цих компонентів:

bzr відділення lp: ubuntu-ui-toolkit 

Розробка програми

Ми починаємо з зображення, де ми маємо заявку GTK, у цьому випадку ми будемо використовувати QML, насправді ми створимо цілу програму за допомогою Qt Швидкий (QML + JavaScript).

Додаток, як і зображення, буде складатися з питання, часу, відповідей, варіантів та пунктів. Єдиною відмінністю (крім "стилю") буде те, що у нас будуть вкладки вгорі.

Для цього ми будемо використовувати елементи button, label та progressBar. Для структури ми будемо використовувати Елемент Колонка y Рядок.

Розробка макета головного екрану:

Ми починаємо з MainView, де будуть знайдені різні вкладки, у цьому випадку ми будемо працювати над макетом початкового екрану нашого додатка.

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

Розміри (для Ubuntu Touch):

ширина: одиниці.gu (50) висота: одиниці.gu (75)

Ми визначаємо довжину та ширину нашого додатку, де ширина буде 50 (одиниць), а довжина 75, тепер ми надамо йому колір:

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

У нас колір заголовка, тексту та нижнього колонтитула:

Як я вже згадував раніше, додаток буде структуровано за вкладками:

    Вкладки {id: tabs Встановити {objectName: "jocTab"} / * Додати {objectName: "addQuestions"} * /}

Як ми бачимо, у нас є дві вкладки, одна коментована (ми її ще не створили), а інша для відтворення (яку ми зараз створимо). Для створення зазначеної вкладки ми створимо новий файл qml (Додати новий -> Qt -> QML-файл -> ...), ім'я цього файлу буде Game.qml.

Ну, давайте модифікуємо Game.qml таким чином, що ми перетворимо його на вкладку, у якій всередині є сторінка (Сторінка):

імпортувати QtQuick 2.0 імпортувати Ubuntu.Components 0.1 Tab {title: i18n.tr ("Гра") Сторінка {}}

На сторінці ми почнемо структурувати елементи, про які ми згадуємо в дизайні. Стовпець, який буде включати всі елементи всередині (він розмістить їх вертикально), потім ми впорядкуємо елементи: Label, ProgressBar, 4 кнопки; а щоб поставити параметри, ми будемо використовувати елемент Рядок, щоб розмістити їх горизонтально.

Стовпець {anchors.top: Gamepage.top anchors.topMargin: 50 інтервал: 15 ширина: parent.width height: parent.height - 50 Мітка {id: question anchors.topMargin: 500 text: "Question?" 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 якорів.horizontalCenter: parent.horizontalCenter Метка {id: тексти збоїв:" Помилки: 0 "колір:" червоний "} Мітка {id: звертається до тексту:" Потрапляє: 0 "} Мітка {id : тексти точок: "Точки: 0" fontSize: "середній"}}

Давайте подивимося, як у кожному елементі, який розмежований його {}, ми маємо різні властивості, у випадку мітки та кнопок ми можемо бачити, що властивість "text" - це текст, який він показує, важливою невізуальною властивістю є ідентифікатор "id" », Що допоможе нам, коли ми реалізуємо логіку програми.

Наприкінці ми можемо побачити результат: