Реклама
9 ноября 2015 г. 15:03

QML - Урок 012. Передача данных из TextInput в ListView (Модель/Представление)

РуководствоQMLListView, ListModel, TextInput, Model, Delegate, QML, Qt, Android, View890

Работа с ListView в QML является довольно частым аспектом при разработке приложения под Android, поскольку очень многие приложения имеют в своём функционале построение списков с данными, записями, параметрами и т.д. Также это справедливо и при разработке приложений под Desktop на QML принцип будет аналогичен под обе платформы.

Для рассмотрения передачи информации в список предлагаю внимательно рассмотреть следующий вариант взаимодействия с ListView.

Принцип представления данных в ListView

Объект ListView имеет два важных свойства:

  1. delegate - который определяет внешний вид одного элемента в ListView
  2. model - в которую помещаются данные каждого элемента

В качестве модели представления данных можно использовать объект ListModel в котором содержатся данные для каждого элемента в списке. При этом данные присваиваются переменным, которые были присвоены определённым свойствам объектов в delegate. В ниже приведенном рисунке delegate имеет два объекта Text, свойствам text которых присвоены переменные text_first и text_second. Данные переменные определяют, куда буду подставляться данные из каждого ListElement в ListModel. Как видно из рисунка, каждый ListElement имеет два свойства, название которых идентично переменным, которые присвоены в delegate. По сути данные переменные являются ролями, по которым подставляются значения из ListModel. Таким образом получаем ListView с текстовыми полями, которые заполнены теми данными, которые были внесены в каждый ListElement в ListModel.

6 ноября 2015 г. 19:17

QML - Урок 014. GridLayout QML - Позиционирование элементов

РуководствоQMLGridLayout, Qt, QML, ячейка, cell, row, column1403

Небольшая заметка, родившаяся из вопроса одного из постоянных читателей сайта. При разработке интерфейса приложения под QML для позиционирования объектов в GridLayout необходимо использовать функционал вложенных свойств Layout. Таких как:

  • Layout.row - указывает строку, в которой располагается объект;
  • Layout.column - указывает колонку, в которой располагается объект;
  • Layout.rowSpan - указывает, на сколько строк должен быть растянут объект;
  • Layout.columnSpan - указывает, на сколько колонок должен быть растянут объект;
  • Layout.minimumWidth - минимальная ширина объекта в слое;
  • Layout.minimumHeight - минимальная высота объекта в слое;
  • Layout.preferredWidth - предпочтительная ширина объекта в слое;
  • Layout.preferredHeight - предпочтительная высота объекта в слое;
  • Layout.maximumWidth - максимальная ширина объекта в слое;
  • Layout.maximumHeight - максимальная высота объекта в слое;
  • Layout.fillWidth - заполнение по ширине;
  • Layout.fillHeight - заполнение по высоте;
  • Layout.alignment - выравнивание в слое;
5 ноября 2015 г. 14:26

QML - Урок 011. Передача данных из QSqlQueryModel в Qml TableView

РуководствоQMLQML, SQL, Qt, DataBase, QSqlQueryModel, TableView1538

Для представления таблиц баз данных в TableView при разработке с использованием QML можно использовать класс, наследованный от QSqlQueryModel. Для этого необходимо в наследованном классе определить метод, который установит соответствие ролей колонок таблицы к соответствующим колонкам в TableView, определенном в QML, где также указаны роли для каждого объекта TableViewColumn, то есть для каждой колонки. Также необходимо будет переопределить метод QVariant data( ... ) const , который возвращает данные для ячеек таблицы. В данном случае информация будет возвращаться в соответствии с определёнными ролями колонок таблицы.

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

Проект состоит из следующих файлов:

  • QmlSqlQueryModel.pro - профайл проекта;
  • database.h - заголовочный для создания и инициализации тестовой базы данных;
  • database.cpp - файл исходных кодов для создания и инициализации тестовой базы данных;
  • model.h - заголовочный файл модели данных;
  • model.cpp - файл исходных кодов модели данных;
  • main.cpp - основной исходный файл проекта;
  • main.qml - qml файл с TableView.
2 ноября 2015 г. 13:55

QML - Урок 010. Доступ к дочерним объектам в TabView в Qml Qt

РуководствоQMLQt, QML, reference error, TabView940

Структура объектов в Qml представляет собой иерахическое дерево, в котором, чтобы получить доступ к свойствам объектов нижележащего уровня необходимо обратиться к первоначальному объекту, далее выбрать дочерний объект и выбрать свойство дочернего объекта, к которому требуется получить доступ.

Но в случае с TabView данный подход не сработает, поскольку объекты вкладок Tab добавляются динамически, следовательно необходимо получить доступ к вкладке по её индексу, забрать объект item из неё и найти интересующий нас дочерний объект в данном item также по индексу. И уже после этого получить доступ к интересующему Нас свойству. Также рекомендую обратить внимание на то, что в данном случае автозавершение кода не работает в QtCreator.

Причём, скорее всего Вы получите ошибку следующего содержания:

ReferenceError: 'something' is not defined

1 ноября 2015 г. 23:39

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

РуководствоQMLQSystemTrayIcon, Qt, QML1825

При переводе интерфейса приложения 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 по клику по иконке в трее, а также по нажатию кнопки закрытия окна. Но только в том случае, если будет активен специальный чекбокс, для контроля процесса сворачивания окна приложения в трей, если же чекбокс не активен, то приложение будет закрываться. Также приложение можно будет закрыть при активном чекбоксе через пункт меню в иконке системного трея.

26 октября 2015 г. 23:25

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

РуководствоQMLAndroid, ListItem, ListModel, ListView, QML, Qt2042

В статье про динамическое создание виджетов в 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 файл с исходными кодами программы
24 октября 2015 г. 23:37

Qt/C++ - Урок 038. Переключение между окнами в Qt

РуководствоQtQMainWindow, QWindow, переключение2278

На днях один из читателей обратился ко мне за помощью по поводу вопроса, ответ на который он искал в интернете. У меня не так много свободного времени, но видимо звёзды сошлись так, что и время было и вопрос из разряда тех, в которых уже имелся определённый опыт.

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

Структура проекта

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

  • anotherwindow.h - заголовочный файл второстепенного окна;
  • anotherwindow.cpp - файл исходных кодов второстепенного окна.
24 октября 2015 г. 13:30

QML - Урок 009. Масштабируемый интерфейс в Qt Qml Android

РуководствоQMLAndroid, Desktop, QML, Qt, scalable, scalable interface, масштабируемый интерфейс1605

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

Параметры графического интерфейса, такие как ширина и высота, задаются в Qt в пикселях, но при одинаковом разрешении экрана на компьютере и на смартфоне (например, 1366 на 768 пикселей) получится абсолютно разный результат. На компьютере кнопка размером 40 на 60 пикселей будет удобной, я бы даже сказал, большой, а на экране смартфона по ней уже будет сложно попасть пальцем.

Следовательно при разработке интерфейса одного приложения под множество платформ и экранов необходимо каким-то образом решать проблему масштабируемости интерфейса.

22 октября 2015 г. 22:40

QML - Урок 006. Custom Calendar in Qt QML or Qt QML Android

РуководствоQMLQt, QML, Android, CalendarStyle, Calendar999

В данном уроке хотелось бы рассказать о том, каким образом можно кастомизировать внешний вид объекта Calendar в Qt Qml . Подправить например цвета, шрифт, а также красиво вписать его в диалоговое окно для выбора даты. Поэтому определимся с тем, как должно работать наше приложение и как оно должно выглядеть:

  1. В главном окне приложения будет находиться стандартная кнопка, на которой отображается дата (хотя если хотите, то можете и её кастомизировать );
  2. При нажатии на кнопку открывается диалоговое окно в котором располагается Calendar и две кнопки ("Ok" и "Cancel"). В Calendar устанавливается дата, которая была указана на кнопке;
  3. При нажатии на кнопку "Cancel" ничего не происходит, а диалоговое окно просто закрывается;
  4. При нажатии на кнопку "Ok" диалоговое окно закрывается, а на кнопке главного окна отобразится дата, которая была выбрана в календаре.

Полагаю, что Вы уже успели заметить, что кастомизация интерфейса приложения в Qt QML проходит одинаково, как для Desktop версий, так и для Android. Иначе бы разработка под Qt не считалась кроссплатформенной. Следовательно я не буду сильно вдаваться в разницу настройки отображения диалогового окна для Desktop версии или для Android версии. Этот момент я объяснял в уроке по созданию кастомизированного диалогового окна .

20 октября 2015 г. 22:06

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

РуководствоQMLQML, Qt, animatedsprite, sprite, sprite sequence1133

После того, как по спрайтам было написано три урока, от их рисования , до их практического применения в 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 - изображение нашего спрайта.
Реклама
Последние комментарии
  • EVILEG
  • 23 мая 2017 г. 12:26

Qt/C++ - Урок 005. QSqlRelationalTableModel - Работаем со связными таблицами

В классе DataBase указывается путь к базе данных. В данном случае C:/example/ и т.д. Так вот, у вас есть каталог example ?

  • EVILEG
  • 23 мая 2017 г. 12:19

Qt/C++ - Урок 029. Изображение в базе данных в Qt – Сохранение и Восстановление

Нет. не верно. Ошибка вот в этой строке: QPixmap inixmap = fileName; // Сохраняем его в изображение объекта QPixmap; Выше я показывал, как что нужно путь передавать в качестве аргумент...

Qt/C++ - Урок 029. Изображение в базе данных в Qt – Сохранение и Восстановление

QString fileName = QFileDialog::getOpenFileName(this, tr("Open File"), "/home", tr("Images (*.png *.xpm *.jpg)")); QPixmap inixmap = fileName; // Сохраняем его в и...

Qt/C++ - Урок 005. QSqlRelationalTableModel - Работаем со связными таблицами

https://www.dropbox.com/sh/vhxcx0iyq0j4578/AACwgWPnZwNqGBndKESiXfFqa?dl=0

  • tetta
  • 22 мая 2017 г. 1:32

Qt/C++ - Урок 052. Кастомизация Qt Аудио плеера в стиле AIMP

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

Сейчас обсуждают на форуме
  • tetta
  • 23 мая 2017 г. 17:59

Создание кнопки "new", "save" и "open". MDI. toolBar

void MainWindow::open(){ QString openFile = QFileDialog::getOpenFileName(this, tr("Open File"), "C:/", ...

Проверка наличия записи в БД при выполнении запроса

Код форм про которые говорил прикрепил. regrdit форма в которой отображается информация отбираемая из базы. editobject форма для редактирования

  • Arrow
  • 23 мая 2017 г. 13:41

qmake

Странно по сообщениям выдает, что у меня компилирутся 32 bit версия (x86 build). Компилятор опознан правильно и в ABI сам определилил x86-windows-msys-pre-64bit и исполняемый файл создае...

WinApi CBTProc

Да всех активных, тоесть через CBT.