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

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

Qt Quick  
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. Но так ли он прост, чтобы привлечь большую аудиторию пользователей? Об этом стоит поговорить отдельно.

Qt Quick  
© 2016-2025 
actech