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

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

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

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

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

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

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

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

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

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

// окно приложения с заголовком (корневой объект)
ApplicationWindow {

property var objList // пользовательское свойство универсального типа

id: idRoot // идентификатор
    visible: true // видимость
    width: 640 // ширина
    height: 280 // высота

// разделитель (дочерний объект)
    SplitView {
        anchors.fill: parent // заполнить по области родителя
        orientation: Qt.Horizontal // разделение по вертикали

// область фона для области прокрутки
        Rectangle {
            width: 200 // ширина
            Layout.minimumWidth: 200 // минимально возможная ширина
            color: "#ff333333" // цвет фона

// область прокрутки
            ScrollView {
                anchors.fill: parent

// текстовая область
                TextArea {
                    id: idSource
                    objectName: "myTextEdit" // имя объекта для доступа к нему из C++
                    anchors.fill: parent
                    color: "silver"
                    font.pointSize: 10 // размер шрифта
                    text: "Введите QML-код" // подсказка
                    textFormat: Text.RichText // формат с поддержкой html-тегов
                    onTextChanged: sourceChanged() // обработка сигнала изменения текста
                }
            }
        }
	// область отображения результатов
        Rectangle {
            id: idResult
            Layout.minimumWidth: 200
            height: idRoot.height
            color: "#ff663333"
        }
    }

// очищает область предварительного просмотра
    function destroyChildren(){

try{
            objList.destroy()
        }catch(e){}

}

// отображает результаты работы кода, создавая QML-объекты из строки
    function showResult(){

try{
            objList = Qt.createQmlObject(idSource.getText(0, idSource.length), idResult)

} catch(e){}
    }

// вызывается при изменении содержимого текстовой области
    function sourceChanged(){

destroyChildren()
        showResult()
    }
}

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

Элементы управления не имеют свойства 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 ){

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

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