Реклама

Поиск

QML - Урок 013. Позиционирование в QML с якорями ( Anchors )

TutorialQMLanchors, left, right, bottom, top, centerIn, Qt, QML182

В дополнение к более традиционным Grid, Row, Column, Qt Quick также предоставляет функционал для элементов слоёв, использующий концепцию якорей ( Anchors ). Каждый элемент может быть рассмотрен, как имеющий набор из 7 невидимых "якорных линий":

  • left;
  • horizontalCenter;
  • right;
  • top;
  • verticalCenter;
  • baseline;
  • bottom.

Baseline ( на данном рисунке) соответствует воображаемой линии, на которой помещается текст. Для элементов без текста это соответствует линии top.

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

TutorialQMLGridLayout, Qt, QML, ячейка, cell, row, column148

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

Реклама

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 - Урок 003. Custom Dialog in QML Android

TutorialQMLcustom dialog, dialog android, qml custom dialog, qml custom dialog example, qml dialog android, qt, qt android, qt qml dialog232

После того, как Мы сделали кастомизированные кнопки в предыдущем уроке , настало время сделать Custom Dialog , который будет выглядеть более нативно для Android устройства, а может даже и смахивать по дизайну на IOS устройство. Во всяком случае Вы сможете более основательно подойди к реализации гайдов этих устройств.

Для создания диалога будет использоваться объект Dialog из библиотеки QtQuick.Dialog . А нюанс при работе с Custom Dialog под Android заключается в том, что Стандартные Кнопки, которые адекватно выглядят при разработке под Desktop, под Android выглядят вырвиглазно, да и ещё их проблематично кастомизировать для начинающего разработчика. Проще реализовать собственные кнопки с собственной стилизацией.

Разработка Custom Dialog

Разработку кастомизированного диалога продолжим на основе проекта из предыдущего урока. Там у нас были созданы две Custom Button , которые мы немного подправим по цветовой гамме, чтобы они лаконично выглядели по отношению к Диалогу. А также, используя прием по их стилизации, стилизуем кнопки диалогового окна, в которому будут присутствовать две кнопки: "OK" и "Cancel". Эти кнопки будут закрывать диалог.

Кнопки диалогового окна нужно будет прибить к нижней части диалога, а остальную часть отдадим под сообщение "Hello, World!!!", а также разделим кнопки серой линией друг с другом, и такой же линией отделим эти кнопки от сообщения. Будет похоже немного на IOS диалог. В качестве линии будет выступать прямоугольник Rectangle, такой же приём применяется и при разработке под Android на Java , только вместо QML используется XML вёрстка.

Для того, чтобы сделать нормальное кастомизированное содержимое диалогового окна, необходимо задать его параметру contentItem тот объект, который заменит содержимое. Наиболее удобным объектом является Rectangle , а уже в нём будем размещать все остальные объекты. Естественно никаких стандартных кнопок там уже и в помине не будет, так что можете о них забыть, но это не большая потеря на самом деле.

QML - Урок 023. Охота за багами при передаче указателя на QObject в QML

TutorialQMLQt, QML, указатель, JavaScriptOwnership, pointer, bug84

Одними из самых мерзких и мало предсказуемых багов являются те, которые возникают в неопределённый момент времени. К числу таких можно отнести баг, который проявляется при передаче указателя на QObject в QML слой. Проблема заключается в том, что если у QObject отсутствует родитель, то при передаче в слой QML происходит смена владельца объекта, то есть ему устанавливается JavaScriptOwnership. В итоге, когда в QML слое пропадут все ссылки на данный объект, то он будет удалён сборщиком мусора QML. Соответственно, все ссылки в C++ слое окажутся невалидными. А приложение при попытке обращения по этим ссылкам молча схлопнется, ничего не сообщив о причине краха.

Говоря о неопределённости срабатывания бага, необходимо отметить, что эта неопределённость произрастает из момента сборки мусора. В обычном варианте этот момент может наступить тогда, когда программа откушает пару гигабайт памяти или когда памяти будет не хватать и её можно будет получить, произведя сборку мусора. То есть приложение может без проблем работать достаточно долго без проявления бага, и даже возможно пережить несколько версий, прежде чем баг проявится у какого-нибудь пользователя, который решит сообщить об этом разработчикам.

Стоит отметить, что данное правило не будет применяться к объектам объявленным в качестве Q_PROPERTY.

Но для демонстрации проблемы можно воспользоваться QML функцией gc() , которая ускорит сборку мусора.

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

Реклама

Реклама