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

Создание приложения для Ubuntu Touch

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

                Ярлык {id: текст ошибок: "Ошибки:" + nfaults color: "красный"} Ярлык {id: hits text: "hits:" +born} Ярлык {id: points text: "Points:" + npoints fontSize: "medium "}

Продолжение игровой логики

Время

Что ж, как мы уже знаем, progressBar показывает время, которое у нас есть, чтобы ответить на вопрос. Чтобы управлять временем, мы будем использовать Timer, таймер - это элемент, который повторяется с интервалом в x миллисекунд, в этом случае мы будем сообщать ему каждый интервал, чтобы увеличить прогресс ProgressBar; Но прежде чем я посмотрю, дошло ли оно до конца времен или нет, если оно доходит до конца, мы должны вычесть жизнь.

Вы можете увидеть строку кода, которую мы еще не реализовали (PopupUtils.open (диалог)), эта строка предназначена для открытия диалога финала на случай, если у нас больше нет жизней (исправлено 3 ошибки), позже в этом посте мы увидим, как это сделать.

Код таймера (мы можем поместить его под ProgressBar):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Таймер {id: simpletimer c: 100 repeat: true running: true onTriggered: {if (time.value <time.maximumValue) time.value + = 1.0 else {nfaults = nfaults + 1 if (nfaults <3) {num = num + 1 Logic.nextQuestion (num) time.value = time.minimumValue} else {simpletimer.stop () PopupUtils.open (dialog)}} }}

Как мы видим, в onTriggered мы помещаем код, который будет увеличивать индикатор выполнения, добавляя 1 единицу каждые 100 (интервал) миллисекунды. Обратите внимание, что мы добавили два атрибута в ProgressBar, minimumValue и maximumValue, которые, как вы можете видеть, являются максимальным значением и минимальным значением.

Чтобы запустить и остановить таймер:

simpletimer.start () simpletimer.stop ()

Параметры (50%, «Заморозить» и «Далее»)

Давайте сначала создадим три переменные, которые контролируют, что параметры можно использовать только один раз:

    свойство int процент: 0 свойство int с: 0 свойство int следующее: 0

50%

Кнопка {id: b50 text: "50%" onClicked: {if (percent == 0) {var corrective = aDocument.contents.questions [num] .correcta if (corrective == 1) {resp2.enabled = false resp3. enabled = false} else if (правильно == 2) {resp1.enabled = false resp4.enabled = false} else if (правильно == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = false resp1.enabled = false} percent = 1}}

С enabled = false мы помещаем кнопку так, чтобы ее нельзя было нажать, таким образом, чтобы получить правильный ответ с aDocument.contents.questions [num]. Correct и отсюда, в зависимости от того, какой из них правильный «мы исключаем »Две кнопки, которых нет.

Стоп-кадр

                Кнопка {id: bCon text: "Freeze" onClicked: {if (with == 0) simpletimer.stop () with = 1}}

Это один из самых простых способов, нам просто нужно остановить таймер с помощью simpletimer.stop (), да, мы должны снова включить его (и установить для параметра progressBar значение 0), когда мы проходим вопрос.

Следующая

                 Кнопка {id: bСледующий текст: "Далее" onClicked: {if (next == 0) {num = num + 1 Logica.nextQuestion (num) next = 1}}}

Мы используем уже созданную функцию для передачи вопроса (nextQuestion).

диалоги

Чтобы завершить игру, мы будем использовать диалог, потому что мы выиграли (больше нет вопросов) или потому что мы проиграли (мы сделали 3 ошибки), чтобы использовать диалоги, мы должны импортировать модуль:

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

Мы собираемся создать диалог, который сообщает нам, что мы проиграли:

        Компонент {id: dialog Dialog {id: dialog title: "Игра окончена!" text: "Вы потеряли все жизни :(" Button {text: "Quit" onClicked: Qt.quit ()} Button {text: "Start over" color: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion ( num) npoints = 0 рождений = 0 PopupUtils.close (диалог)}}}}

У нас есть две кнопки: одна для закрытия приложения (Qt.quit ()), а другая для начала игры. Мы инициализируем переменные до 0 и закрываем диалог.

Чтобы открыть диалог:

PopupUtils.open (диалог)

Чтобы закрыть его:

PopupUtils.close (диалог)

Посмотрим диалог в конце игры:

Ubuntu сенсорный

Мы можем создать точно такой же диалог, изменив идентификатор и текст, в котором говорится, что мы выиграли.

Разработка совокупности вопросов

Когда мы проектируем это в GTK, мы создаем диалог, но на этот раз сделаем это во вкладке, в любом случае он будет иметь ту же структуру:

Как мы видим, мы будем использовать Label, TextArea, чтобы написать вопрос, 4 TextField и 4 Switch; наконец, кнопка для добавления вопроса. Давайте просто посмотрим на код:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Questions") Page {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 интервал: 15 width: parent.width height: parent.height - 50 Ярлык {id: текст вопроса: "Добавить вопрос в базу данных:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {width: parent.width - 20 height: units.gu (12) contentWidth: units.gu (30) contentHeight: units.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 1" width: 300 Взаимодействие с другими людьми} Переключатель {проверено: ложь}} Строка {интервал: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Ответ 2" ширина: 300} Переключатель {проверено: false}} Строка {интервал: 15 anchors.horizontalCenter: parent. horizontalCenter TextField {placeholderText: "Response 3" width: 300} Switch {checked: false}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" width: 300} Switch {checked: false}} Кнопка {текст: "Добавить +" anchors.horizontalCenter: parent.horizontalCenter width: parent.width - 20}}}}
Если есть сомнения по поводу кода, который вы уже знаете, комментарий

Посмотрим, как это выглядит:

Захват от 2014 07:24:16

Если мы сейчас протестируем переключатели, мы увидим, что можем пометить их все как правильный вопрос, и, конечно, только один может быть, поэтому мы сделаем следующее: мы сможем дать идентификатор каждому переключателю (также для текстовых полей, поскольку нам нужно будет получить контент для сохранения его в базу данных) в соответствии с вашим ответом, и когда мы щелкнем по нему, мы переведем все остальные в режим checked = false:

             Строка {интервал: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Ответ 1" ширина: 300} Переключатель {id: sw1 checked: false onClicked: {if (sw1.checked == true) {sw2. checked = false sw3.checked = false sw4.checked = false}}}}

Если мы попробуем это сейчас, мы увидим, как мы можем отметить только один.


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

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

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

*

*

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

  1.   vr_rv сказал

    Очень хорошие и хорошо объясненные статьи.
    Кстати, не могли бы вы порекомендовать книги, каналы YouTube или блоги на испанском языке, чтобы научиться разрабатывать на QML для Ubuntu?

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

      Что ж, на испанском языке наверняка есть несколько учебных пособий на YouTube или в странном блоге, но правда в том, что материала мало.

      Я вижу, что вы подключаетесь через nokia, если это симбиан последнего, вы также можете создавать приложения с QML, на самом деле я так узнал, вот сайт разработки nokia: http://developer.nokia.com/ (есть учебники, полные проекты ...)

  2.   Нестор сказал

    Отличная серия постов, спасибо за вклад.

  3.   Марти сказал

    Спасибо за урок,
    Но я не понимаю, как вопросы и ответы добавляются в базу.
    С помощью кнопки добавления.
    Спасибо за все.