ACtech
ACtech
учимся и разрабатываем

Редактор QML-кода с живым просмотром

16.11.2017

На предыдущем занятии мы коротко познакомились с Qt Quick, а на этом создадим простое, но весьма полезное приложение для быстрого и эффективного изучения основ QML и запуска примеров – редактор QML-кода с просмотром результатов его работы в реальном времени.

Откройте Qt Creator и в главном меню выберите команду Файл|Создать файл или проект… для запуска помощника создания приложения.

  • В появившемся диалоге выберите категорию “Приложение”, детализацию “Приложение Qt Quick Controls 2” и нажмите кнопку “Выбрать…”. Далее пройдите шаги:
  • Размещение – название приложения LivePreview
  • Система сборки – qmake
  • Подробнее (Стиль Qt Quick Control 2) – Материальный
  • Комплекты – отмечаем все доступные
  • Итог – оставить всё по умолчанию и нажать кнопку “Завершить”

В дереве проектов найдите созданный проект LivePreview (его название выделено жирным шрифтом, что означает активность проекта), перейдите в папку Ресурсы и удалите в ней файлы формы Page1.qml и Page1Form.ui.qml. Откройте в редакторе файл main.qml и замените его текст на следующий.

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {

    visible: true
    width: 640
    height: 280
}

После запуска проекта на выполнение отобразится типовое окно приложения заданных размеров, которое мы и наполним нужной функциональностью. Для начала опишем задачу. В окне приложения необходимо создать две области, в одной из которых будет вводиться код, а другая будет сразу отображать его работу после очистки от предыдущего вывода. Между областями поместим разделитель, при помощи которого можно будет изменять ширину областей. Для ввода текста понадобится многострочное поле ввода с прокруткой.

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

Откройте справку и в поле поиска по ней введите строку ”? QML Types”. Появится отфильтрованный список, в котором нужно выбрать опцию All QML Types. В справке откроется страница со списком элементов управления, где несложно найти нужные нам – SplitView, TextArea и ScrollView. На страницах справки по этим элементам даётся код их использования, который нужно скопировать в наш проект и адаптировать.

Другой способ получения готового кода состоит в том, чтобы открыть в браузере поисковик, и произвести поиск фраз “qml текстовое поле с прокруткой”, “qml разделитель”, ”qml как динамически создать кнопку” и т.п. В русскоязычном сегменте по qml ощутимо меньше информации и ответов, поэтому стоит воспользоваться Google.

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

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

import QtQuick.Controls 1.4 // обеспечивает разделитель
import QtQuick.Controls 2.2 // обеспечивает элементы управления

Элементы управления не имеют свойства color для изменения цвета занимаемой ими области, поэтому они оборачиваются в блок Rectangle, имеющий данное свойство. Из этого следует часто использующийся приём:

если требуется обратиться к свойству, которое отсутствует у целевого объекта, то его нужно либо обернуть в объект, у которого оно есть, либо изменить тип целевого объекта

Например, у нашего корневого объекта ApplicationWindow нет свойства right. Если оно требуется, то после объявления свойств ApplicationWindow добавляем объект, например, Item, который растягиваем по всей области ApplicationWindow при помощи свойства anchors.fill: parent. Теперь все дочерние объекты будут находиться внутри блока Item и смогут обратиться к его свойству right.

Для расположения объектов относительно друг друга широко используются привязки anchors, которые позволяет:

  • производить выравнивание одного объекта внутри другого
  • заполнять доступную область одного объекта другим
  • привязывать выбранные границы одного объекта к границам другого с использованием или без использования отступов

Координатные привязки anchors используются в тех случаях, где использование компоновщиков Layout затруднительно или невозможно.

Генерация QML-кода из строки при помощи метода createQmlObject является одним из способов динамического создания объектов.

Идентификатор id является свойством специального типа, к которому нельзя обратиться через запись объект.id, так как id это как раз и есть уникальная ссылка на объект. Идентификатор используется для доступа к объектам в коде QML, а для доступа к ним из Qt С++, для реализации дополнительной функциональности, служит свойство objectName. Например, при запуске примера в глаза бросается слишком большой шаг табуляции при вводе текста. Средствами QML его нельзя изменить, но при помощи Qt С++ можно. Откройте файл main.cpp и перед строкой return app.exec(); добавьте следующий код:

QObject *root = engine.rootObjects().at(0);
QObject *textEdit = root->findChild<QObject*>(QStringLiteral("myTextEdit"));

if( textEdit ){

QQuickTextDocument *quickTextDocument = textEdit->property("textDocument").value<QQuickTextDocument*>();
QTextDocument *document = quickTextDocument->textDocument();
QTextOption textOptions = document->defaultTextOption();
textOptions.setTabStop(20);
document->setDefaultTextOption(textOptions);
}

Получившийся редактор далёк от идеала, но на его основе можно реализовать необходимую функциональность (подсветка кода, работа с файловой системой, справочник и др.). Интересно будет и решение, позволяющее осуществить живой просмотр на устройcтве Android.

Код примера показывает относительную простоту программирования на QML. Но так ли он прост, чтобы привлечь большую аудиторию пользователей? Об этом стоит поговорить отдельно.

© 2016-2024 
actech