Реклама

Поиск

QML - Урок 007. ListView Qml. Динамическое создание и удаление элементов

TutorialQMLAndroid, ListItem, ListModel, ListView, QML, Qt236

В статье про динамическое создание виджетов в Qt я уже рассказывал, как создавать и удалять кнопки динамически, а также как с ними взаимодействовать. И там использовался Vertical Layout , а случае с Qml мы сможем использовать ListView Qml, как аналогично используется при программирование в Java под Android. Что, к слову говоря, также применимо при программировании на Qt под Android.

В статье про динамическое создание виджетов использовались для примера объекты класса QButton. В данной статье будут использоваться объекты Button Qml, о кастомизации которых было рассказано в следующей статье . Но кнопки будут размещаться в ListView Qml.

Структура проекта для работы с ListView Qml

На это раз обойдёмся проектом, созданным по умолчанию и даже без дизайнера интерфейсов. Тем более, что на момент написания статьи не все параметры можно было задать в дизайнере. А структура проекта следующая:

  • QmlDynamic.pro - профайл проекта;
  • deployment.pri - файл правил деплоя на целевую платформу;
  • main.cpp - основной файл запуска приложения;
  • main.qml - qml файл с исходными кодами программы

QML - Урок 008. Работа с System Tray в Qml Qt приложении

TutorialQMLQSystemTrayIcon, Qt, QML227

При переводе интерфейса приложения c Qt/C++ на Qt/QML мои руки добрались и до иконки приложения в системном трее. Задача заключалась в том, чтобы перевести иконку в System Tray с C++ на Qml, частично или полностью. Первый вариант, который я реализовал, являлся обёрткой вокруг QSystemTrayIcon с QMenu с использованием системы сигналов и слотов . Решение вполне логичное, учитывая, что в QML нет готового объекта, наподобие MenuBar для System Tray .   Поэтому делаем обёртку, с которой можно взаимодействовать из QML слоя.

После того, как обёртка была реализована, мне довелось посоветоваться с программистом из Wargamming Константином Ляшкевичем , который порекомендовал мне также обратить внимание на то, что QML может иметь доступ не только к сигналам и слотам, но и к параметрам Q_PROPERTY, которые также имелись в классе QSystemTrayIcon, то есть фактически можно было только зарегистрировать данный класс, как тип в QML слое и попытаться написать практически весь код на QML. Я проверил данный совет и рассказал о результате Константину. В итоге он сам заинтересовался данной задачей и Мы потратили вечерний час на занимательное костылирование и совместными усилиями запихали QSystemTrayIcon максимально в QML.

Таким образом в данной статье Вы увидите две реализации для работы с иконкой в системном трее.

Полученное приложение будет сворачиваться в System Tray по клику по иконке в трее, а также по нажатию кнопки закрытия окна. Но только в том случае, если будет активен специальный чекбокс, для контроля процесса сворачивания окна приложения в трей, если же чекбокс не активен, то приложение будет закрываться. Также приложение можно будет закрыть при активном чекбоксе через пункт меню в иконке системного трея.

Реклама

QML - Урок 024. Custom QQuickItem - добавляем в QML объект из C++

TutorialQMLCustom QQuickItem, QQuickItem, QQuickPaintedItem, Qt, QML302

QML объекты в Qt весьма замечательны, с ними удобно работать, но что если стандартных объектов нам становится недостаточно? Тогда можно сделать собственный объект, запрограммировать его в C++ и внедрить в логику QML слоя. В данном уроке предлагаю сделать небольшой импровизированный таймер, который можно запустить, остановить и очистить, но при этом дизайн таймера будет разработан в C++ слое и по сути большая часть работы будет осуществляться в C++.

А для разработки кастомизированного QuickItem понадобится использовать QQuickPaintedItem, в котором будет таймер, представленный на рисунке ниже, который будет нарисован наподобие обычного QGraphicsItem , но он будет обладать рядом свойств, которыми можно будет управлять из QML слоя.

QML - Урок 026. Intents с Qt для Android, часть 1

TutorialQMLAndroid, Qt, QML, Intent139

"Intent" является главной возможностью для межпроцессорного взаимодействия в Android. В основном, Intent является объектом, который обрабатывается операционной системой и передаётся затем одному или большему количеству установленных приложений, основываясь на его содержании. Это может быть экземпляр запроса отображения видео, в данном случае тип intent должен быть ACTION_VIEW и mime тип должен быть установлен соответствующий. Приложения могут подписываться на соответствующие Intents в настройках фильтра intent в своих манифест файлах. В первый раз пользователю устройства будет предоставлен выбор, какие типы intent известны приложению и на какие можно подписаться. Если они выбраны, они будут установлены по умолчанию, или выбраны при вопросе от каждого экземпляра приложения при необходимости.

Это первая из нескольких статей, как использовать intents с Qt для Android.

Сам механизм имеет довольно общий характер. То, что описано выше является одним из способов использования, но intents также могут быть использованы и для другого: Одним из таких случаев является запуск сервисов внутри приложения. Это, как правило, называется "explicit intent", что означает, что предусмотрено для запуска полное имя сервиса, и не может быть перехвачено другим приложением.

Другим способом использования intents является широковещательный вариант (broadcast), для экземпляров, когда изменяется временная зона устройства. В это время как действия описанные выше позволяют запускать только одно определённое приложение, выбранное пользователем, то при широковещательном вариант сигнал будет передан во все приложения, которые были на него подписаны.

QML - Урок 002. Custom Button in QML Android

TutorialQMLAndroid, qml, qml button, qml button android, qml custom button, qml custom button android, qt, qt qml319

Начну серию уроков по QML Android с кастомизации кнопки, или правильнее сказать со стилизации , поскольку в данном случае такой термин подходит больше. Мы не будем вызывать диалоговые окна в данном уроке, а просто сделаем свой QML Cutom Button , который будет менять цвет при нажатии на него. А для наглядности таких кнопок будет две.

Первая кнопка будет красного цвета с черным ободком и чёрным текстом, а при нажатии она будет менять цвет фона на черный с красным ободком и красным цветом. А вторая кнопка будет иметь те же цвета, но в противоположной последовательности.

Структура проекта QML Custom Button

Проект создаётся в QtCreator как проект приложения Qt Quick с элементами Quick Controls. Фактически там уже будет менюбар, несколько диалогов и пара кнопок. Так вот, выкидываем всё, кроме двух кнопок и поехали их кастомизировать.

А структура проекта в данном случае получится следующая:

  • QMLCutomButton.pro - Знакомый нам профайл проекта;
  • deployment.pri - файл для установки исходного кода на устройство;
  • main.cpp - давно знакомый стартовый файл приложения
  • qml.qrc - файл ресурсов проекта, там и складируются qml файлы
  • main.qml - файл qml главного окна приложения
  • MainForm.ui.qml - и опять ресурсный файл дизайнера, да простят меня хардкорщики. В нём и будут прятаться кнопки. Проект создавался под минимальную версию Qt 5.5.

Реклама

QML - Урок 016. База данных SQLite и работа с ней в QML Qt

TutorialQMLБаза данных, SQLite, Qt, QML, Android, DataBase, Model, View, MVC395

Небольшой пример по работе с базой данных в QML Qt . В данном уроке сводится воедино информация о применении сигналов и слотов в QML Qt , о доступе к C++ классам из QML слоя, реализации интерфейса приложения на QML, а также о реализации модели/представлении для таблицы базы данных.

База данных содержит таблицу со списком людей, в которой имеется четыре колонки:

  • id (INTEGER) - уникальный номер записи;
  • FirstName (VARCHAR (255)) - Имя;
  • SurName (VARCHAR (255)) - Фамилия;
  • Nik (VARCHAR (255)) - Ник.

Приложение должно реализовывать удаление и добавление записей в базу данных через интерфейс приложения. Для добавления записей в Базу данных будет использоваться три поля для ввода данных и кнопка, которая инициализирует добавление данных в базу данных SQL . Добавление записей в таблицу осуществляется через класс обёртку предназначенным для этого методом.Также в приложении присутствует класс ListModel , который реализует модель представления данных для отображения информации в TableView в слое QML.

QML - Урок 015. Разработка QML Data Mapper - Аналог QDataWidgetMapper

TutorialQMLQML, Qt, QDataWidgetMapper, mapper, QMLDataMapper76

В процессе переноса GUI одной софтины с QWidgets на QML обнаружилось отсутствие аналога QDataWidgetMapper для QML . Данный факт был несколько портящим настроение. Но делать было нечего, кроме как искать другие способы реализации или делать полностью свой велосипед для этого, свой Qml Data Mapper.

Тем не менее поиски на просторах сети дали свои результаты в качестве примера 2011 года от разработчиков Nokia по реализации SQL Widget Mapper для BlackBerry на основе Cascades (фреймворка для native разработки на QML Qt под BlackBerry, соответственно). Путём вечерней медитации над данным примером удалось перепилить код для нынешнего QML Qt , который вполне неплохо будет чувствовать себя как при работе под Desktop, так и при работе под Android, (кроссплатформенность как ни как).

Для демонстрации работы QML Data Mapper будет написано приложение, которое работает с базой данных SQLite. При каждом запуске приложение записывает несколько строк в базу данных, из которой данные забираются при помощи модели данных наследованной от QSqlQueryModel и отображаются в QML TableView. В главном окне приложения присутствует кнопка, по нажатию которой вызывается диалоговое окно, в котором отображается информация о первой строке таблицы. При двойном клике по одной из строк таблицы также вызывается диалоговое окно, но с информацией об этой строке. Также в диалоговом окне присутствуют кнопки для пролистывания информации из таблицы.

QML - Урок 018. Loader в QML Qt - динамическая работа с компонентами

TutorialQMLQt, QML, QtQuick, Loader180

Для организации динамической смены компонентов удобно использовать компонент Loader, который входит в QML QtQuick и является  контейнером для ваших компонентов в приложении, которые допустим необходимо периодически заменять в интерфейсе.

Если провести аналогию, например, с разработкой на Java под Android, то там имеется система фрагментов, которые также могут заменяться в контейнере для них, следуя логике разрабатываемого приложения. Допустим, Мы кликаем на кнопку и в определённом контейнере у нас заменяется один фрагмент другим, а если кликаем на другую кнопку, то появляется третий фрагмент, который заменяет второй фрагмент собой.

Поэтому сделаем приложение, которое будет иметь 5 кнопок и по нажатию каждой кнопки в Loader будут меняться фрагменты.

Структура проекта для работы с Loader

  • QmlLoader.pro - профайл проекта;
  • main.cpp - основной файл исходных кодов приложения;
  • main.qml - основной файл кодов qml;
  • Fragment1.qml - первый фрагмент для замены в Loader;
  • Fragment2.qml - второй фрагмент;
  • Fragment3.qml - третий фрагмент.

QML - Урок 019. Navigation Drawer в Qt Qml Android

TutorialQMLNavigation Drawer, Qt, QtQuick, QML, Qndroid162

Одним из основных элементов управления в Android приложении является Navigation Drawer , но в QML нет готового компонента для этого элемента, зато парни из Cutehacks сделали свой Navigation Drawer , код этого компонента выложен на гитхабе. Я давно уже хотел запустить этот код на живом Android устройстве и вот руки наконец-то до него дотянулись.

Я подробно изучил этот код и немного его подправил, поскольку в той версии было некоторое несоответствие Material Design в том плане, что панелька раскрывалась на 78 процентов от ширины экрана вне зависимости от ориентации. А Material Design рекомендует в портретной ориентации раскрывать Navigation Drawer так, чтобы он не доходил до противоположного края на 56 dip в случае со смартфонами и на 64 dip в случае с планшетами, но сделаем хотя бы для смартфонов, а в ландшафтной ориентации был не более, чем 320 dip шириной. Что я и поправил, также выпилив малую часть часть ненужного на данный момент кода и немного переименовав переменные под себя.

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

Предлагаю Вашему вниманию пример использования данного Navigation Drawer для смены трёх фрагментов в объект Loader с помощью трёх пунктов меню, которые будут находиться в данном Navigation Drawer .

Структура проекта для работы с Navigation Drawer

Структура проект будет сходна со структурой проекта из статьи по изучению работы с компонентом Loader .

  • QmlNavigationDrawer.pro - профайл проекта;
  • main.cpp - основной файл исходных кодов приложения;
  • main.qml - основной файл кодов qml;
  • Fragment1.qml - первый фрагмент для замены в Loader;
  • Fragment2.qml - второй фрагмент;
  • Fragment3.qml - третий фрагмент.
  • NavigationDrawer.qml - сам объект Navigation Drawer.

QML - Урок 005. Применение Sprite и AnimatedSprite в QML Qt

TutorialQMLQML, Qt, animatedsprite, sprite, sprite sequence124

После того, как по спрайтам было написано три урока, от их рисования , до их практического применения в Qt в этой и этой статьях, считаю, что нельзя пройти мимо применения спрайтов в QML Qt .

Спрайты в QML применяются ещё проще, чем в Qt/C++, поскольку в QML имеются классы, которые специально созданы для работы со спрайтами: Sprite и AnimatedSprite.

Структура проекта для работы со Sprite и AnimatedSprite

Проект создаётся как стандартный проект QtQuick with controls, после чего я выкидываю всю лишнее, типо менюбара и кнопок. Оставляю только то, что мы будем использовать для демонстрации.

  • main.cpp - основной файл проекта, в котором запускается qml файл;
  • main.qml - окно приложения;
  • MainForm.ui.qml - форма для работы с дизайнером;
  • sprite_sheet.png - изображение нашего спрайта.

Реклама

Реклама