Интеграция QML с JavaScript

QML хорошо интегрируется с JS и использует синтаксис, подобный JSON, что позволяет определять выражения и методы как функции JS. Логику приложения Qt Quick можно определить в виде кода javascript. Причем код JavaScript можно написать внутри файла QML или в отдельном JS-файле, который можно затем импортировать в приложение. Для выполнения кода JavaScript QML предоставляет соответствующую среду, которая, однако, имеет некоторые ограничения по сравнению с аналогичной средой веб-браузера.

Например, определим функцию с кодом JS в файле QML:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    // обработчик нажатия кнопки
    function btnClicked(controlName, content) {
        controlName.text = content
    }
    Column{
        padding: 5
        spacing: 5
        Button {
            text:"Click"
            onClicked: btnClicked(header, "Text Clicked")
        }
        Text {
            id: header
            text: "Hello"
            font.pixelSize: 18
        }
    }
}

Здесь по нажатию на кнопку вызывается JS-функция btnClicked, в которую передается объект и устанавливаемый для него текст.

Подключение файлов JavaScript

Если код большой или в проекте много файлов, где надо использовать один и тот же функционал JavaScript, то код JS можно вынести в отдельный файл. Например, добавим в Ct Creator файл JavaScript. Для этого нажмем на узел Source Files и в контекстном меню выберем пункт Add New...

Далее среди шаблонов нового элемента выберем шаблон JS File

На следующем окне дадим файлу какое-нибудь имя, например, "hello" (расширение js указывать необязательно)

На последующих шагах оставим все опции по умолчанию. В итоге в проект будет добавлен файл, в котором можно будет определить код JavaScript

Стоит отметить, что при добавлении в проект js-файла в файл конфигурации проекта CMakeLists.txt автоматически добавляется соответствующий пункт:

qt_add_qml_module(
    # остальное содержимое
    QML_FILES hello.js
)

Определим в JavaScript-файле простейший код:

let clicks = 0;
// текст кнопки
const btnText = "Click";
// обработчик нажатия кнопки
function btnClicked(controlName) {
    clicks++;
    controlName.text = "Clicks count: " + clicks;
}

Здесь определены переменная clicks (счетчик нажатий), константа btnText (текст кнопки) и функция btnClicked, которая будет представлять обработчик нажатия кнопки и будет принимать идентификатор изменяемого элемента. В этой функции увеличиваем счетчик нажатий и изменяем соответствующим образом текст элемента.

В файле main.qml подключим этот файл:

import QtQuick
import QtQuick.Controls

import "hello.js" as Hello  // подключение js-файла

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"


    Column{
        padding: 5
        spacing: 5
        Button {
            text: Hello.btnText
            onClicked: Hello.btnClicked(header)
        }
        Text {
            id: header
            text: "Hello"
            font.pixelSize: 18
        }
    }
}

Для подключения js-файла применяется выражение

import js_файл as идентификатор

То есть вся функциональность подключаемого js-файла проектируется на определенный идентификатор, через который можно обращаться к данной функциональности. То есть в данном случае функциональность файла "hello.js" будет доступна через идентификатор Hello. Например, мы можем назначить кнопке в качестве текста значение константы btnText, а в качестве обработчика функцию btnClicked, определенную в JavaScript-файле:

text: Hello.btnText
onClicked: Hello.btnClicked(header)

Таким образом, при нажатии будет увеличиваться счетчик и соотвест образом изменяться текст элемента Text: