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

Введение

Здесь будет серия сообщений (как те, что я сделал с как-то), но на этот раз с заявкой на Ubuntu сенсорный, приложение изначально такое же, как в сообщения от как-то, то есть своего рода игра, в которой у нас есть вопрос и 4 ответа в виде теста, затем у нас есть три кнопки, одна для исключения двух возможных ответов (50%), другая для остановки времени и последняя для уйти от вопроса.

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

Хотя приложение ориентировано на Ubuntu сенсорный Его также можно использовать в Ubuntu как если бы это было обычное приложение

Базовые знания

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

Компоненты Ubuntu - это компоненты, которые мы будем использовать для нашего приложения:

Захват от 2014 07:04:23

Чтобы использовать их так же, нам нужно импортировать модуль:

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

Мы можем найти различные элементы в компонентах, такие как кнопки, индикаторы выполнения и т. Д. Мы можем скачать проект, в котором нам показывают большинство этих компонентов:

бзр филиал lp: ubuntu-ui-toolkit 
у нас должен быть установлен bzr

Разработка приложения

Начнем с изображения, на котором у нас есть приложение, созданное с помощью GTK, в этом случае мы будем использовать QML, фактически мы создадим все приложение с QT Быстрый (QML + JavaScript).

Приложение, как и изображение, будет состоять из вопроса, времени, ответов, вариантов и баллов. Единственная разница (кроме «стиля») будет заключаться в том, что выше у нас будут вкладки.

Для этого мы будем использовать элементы button, label и progressBar. Для структуры мы будем использовать элемент Column y Строка.

Позже мы создадим совокупность вопросов

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

Мы начинаем с MainView, где будут находиться разные вкладки, в этом случае мы будем работать над макетом начального экрана нашего приложения.

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

Размеры (для Ubuntu Touch):

ширина: units.gu (50) высота: units.gu (75)

Мы определяем длину и ширину нашего приложения, где ширина будет 50 (единиц), а длина 75, теперь мы собираемся дать ему цвет:

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

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

Захват от 2014 07:05:15

Как я уже упоминал, приложение будет структурировано по вкладкам:

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

Как мы видим, у нас есть две вкладки, одна закомментирована (мы ее еще не создали), а другая - для воспроизведения (которую мы сейчас создадим). Чтобы создать указанную вкладку, мы создадим новый файл qml (Добавить новый -> Qt -> Файл QML ->…), имя указанного файла будет Game.qml.

Что ж, давайте изменим Game.qml таким образом, чтобы превратить его в Tab, внутри которого есть страница (Page):

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("Game") Page {}}

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

Столбец {anchors.top: Gamepage.top anchors.topMargin: 50 интервал: 15 width: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 текст: "Вопрос?" 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} Кнопка {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp4 text: "Response 4" anchors .horizontalCenter: parent.horizontalCenter} Строка {интервал: 15 anchors.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50%"} Button {id: bCon text: "Freeze"} Button {id: bNext text: " Далее "}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Label {id: failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : points text: "Points: 0" fontSize: "medium"}}

Давайте посмотрим, как внутри каждого элемента, который ограничен его {}, у нас есть разные свойства, в случае метки и кнопок мы видим, что свойство "text" - это текст, который он показывает, а важным невизуальным свойством является идентификатор «id», который нам поможет при реализации логики приложения.

В конце мы видим результат:

Захват от 2014 07:23:19


6 комментариев, оставьте свой

Оставьте свой комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

*

*

  1. Ответственный за данные: Мигель Анхель Гатон
  2. Назначение данных: контроль спама, управление комментариями.
  3. Легитимация: ваше согласие
  4. Передача данных: данные не будут переданы третьим лицам, кроме как по закону.
  5. Хранение данных: база данных, размещенная в Occentus Networks (ЕС)
  6. Права: в любое время вы можете ограничить, восстановить и удалить свою информацию.

  1.   карликовый сказал

    Мне он нравится, на мой взгляд, не хватает некоторых деталей, но это хороший справочник ...

  2.   Ariel сказал

    Очень хорошо! Он отлично работает, чтобы начать с Qml.
    Это, безусловно, лучший Linux-блог на испанском языке. Я никогда раньше не комментировал, но время от времени проверяю; это почти моя зависимость.
    Один вопрос ... Можно ли установить программу, созданную с помощью Ubuntu SDK, в совсем другом дистрибутиве, например, в Arch? Я предполагаю, что необходимо будет выполнить некоторую зависимость (например, Qt, конечно). Но все эти зависимости обычно есть в репозиториях любого дистрибутива.

    1.    Ariel сказал

      Извините, последнее предложение, должно быть, было вопросом… Все ли зависимости в репозиториях какого-либо дистрибутива?

      1.    лолбимбо сказал

        По умолчанию вы не можете установить -la (в данном случае), поскольку он имеет такие зависимости, как компоненты ubuntu (в данном случае версия 0.1), если вы установите их позже, это не должно вызвать проблем, если вы не используете компоненты (Я думаю, вы также можете импортировать их все в приложение, чтобы оно увеличивалось в весе, но вы удаляете их как зависимость), например, приложение sigram (клиент для телеграммы) сделано с помощью qt quick, и вы можете установить его на большинство дистрибутивы.

  3.   Саске сказал

    Надеюсь, вы закончите заявку.

    1.    Габиелус сказал

      Это очень хорошо. Я уже выполнил шаги, и все как есть.
      Надеюсь, вы продолжите проект ...