Первые шаги с QML

Создание документа QML

Документ QML определяет иерархию объектов с удобочитаемой и структурированной компоновкой. Каждый документ QML состоит из двух частей: раздела импорта и раздела объявления объекта. Типы и функциональность, наиболее часто используемые в пользовательских интерфейсах, предоставляются в импорте QtQuick.

Импорт и использование модуля QtQuick

Для использования модуля Qt Quick документ QML должен его импортировать. Синтаксис импорта выглядит следующим образом:

import QtQuick 2.3

Теперь типы и функциональность, предоставляемые Qt Quick, могут использоваться в документе QML!

Определение иерархии объектов

Раздел объявления объекта в документе QML определяет то, что будет отображено на визуальной сцене. Qt Quick предоставляет базовые строительные блоки для всех пользовательских интерфейсов, такие как объекты для отображения изображений и текста, а также для обработки пользовательского ввода.

Простой пример объявления объекта — это цветной прямоугольник с центрированным в нём текстом:

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

Это определяет иерархию объектов с корневым объектом Rectangle, который имеет дочерний объект Text. Позиция объекта Text автоматически устанавливается относительно Rectangle, а сам объект Text добавляется в свойство children объекта Rectangle в QML.

Объединение всего в одно целое

Типы Rectangle и Text, используемые в примере выше, оба предоставляются импортом QtQuick. Объединив импорт и объявление объекта, получим полный документ QML:

import QtQuick 2.3

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

Если сохранить этот документ как "HelloWorld.qml", его можно загрузить и отобразить.

Создание и запуск проектов QML

Для отображения графической сцены, определённой документом QML, его можно загрузить с помощью Qt Creator. Для простых файлов пользовательского интерфейса, таких как этот, выберите Файл > Создать файл или проект > Приложения > Qt Quick UI в Qt Creator.

Нажав зелёную кнопку Запуск, вы запустите приложение. Вы должны увидеть текст Hello, World! в центре красного прямоугольника.

Дополнительную информацию о создании и запуске проектов в Qt Creator можно найти на следующих страницах:

• Создание проектов Qt Quick
• Сборка и запуск примера

Создание приложений QML с элементами управления

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

Вставка типа ApplicationWindow — хорошая отправная точка для создания приложений. Базовая компоновка пользовательского интерфейса приложения имеет такой вид:

В каждом блоке могут быть добавлены и соединены различные элементы управления, формирующие приложение. Например, следующий фрагмент кода представляет собой базовое приложение, использующее предыдущую компоновку:

//import related modules
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

//window containing the application
ApplicationWindow {

    //title of the application
    title: qsTr("Hello World")
    width: 640
    height: 480

    //menu containing two menu items
    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: console.log("Open action triggered");
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    //Content Area

    //a button in the middle of the content area
    Button {
        text: qsTr("Hello World")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

Приложение содержит два пункта меню и кнопку посередине. Нажатие на пункт меню Выход закрывает приложение.

Доступны также различные методы навигации и другие элементы управления, такие как кнопки и ползунки. Следующие примеры доступны в Qt Creator и демонстрируют различные элементы управления и компоновки.

• Основные компоновки
• Галерея сенсорных взаимодействий

Вы можете скопировать и вставить фрагменты кода в это простое приложение "Привет, мир!", чтобы увидеть, как работает QML.

Обработка пользовательского ввода

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

Например, рассмотрим следующий пример:

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: parent.color = "blue"
    }
}

Этот пример можно сохранить как "ClickableHelloWorld.qml" и запустить с помощью qmlscene. При нажатии пользователем в любом месте окна прямоугольник будет меняться с красного на синий. Обратите внимание, что тип MouseArea также генерирует сигнал clicked для событий касания, поэтому этот код также будет работать на мобильном устройстве.

Аналогичным образом, пользовательский ввод с клавиатуры можно обработать с помощью простого выражения:

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Return) {
            color = "blue";
            event.accepted = true;
        }
    }
}

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

Связывание свойств

Объекты и их свойства составляют основу графического интерфейса, определённого в документе QML. Язык QML позволяет связывать свойства друг с другом различными способами, что позволяет создавать высокодинамичные пользовательские интерфейсы.

В следующем примере геометрия каждого дочернего Rectangle связана с геометрией родительского Rectangle. Если геометрия родительского Rectangle изменится, геометрия каждого дочернего Rectangle автоматически обновится благодаря связыванию свойств.

Rectangle {
    width: 400
    height: 200

    Rectangle {
        width: parent.width / 2
        height: parent.height
    }

    Rectangle {
        width: parent.width / 2
        height: parent.height
        x: parent.width / 2
    }
}

Анимации

Свойства также могут быть динамически обновлены с помощью анимаций. Импорт QtQuick предоставляет различные типы анимаций, которые могут быть использованы для анимирования изменения значения свойства. В следующем примере свойство анимируется, а затем отображается в области Text:

Rectangle {
    color: "lightgray"
    width: 200
    height: 200

    property int animatedValue: 0
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1000 }
        PropertyAnimation { to: 0; duration: 1000 }
    }

    Text {
        anchors.centerIn: parent
        text: parent.animatedValue
    }
}

Отображаемое значение будет периодически изменяться от 0 до 150.

Определение пользовательских типов QML для повторного использования

Одним из важнейших понятий в QML является повторное использование типов. Приложение, вероятно, будет содержать несколько визуальных типов, которые похожи (например, несколько кнопок), и QML позволяет определять такие вещи как повторно используемые пользовательские типы, чтобы минимизировать дублирование кода и максимизировать удобочитаемость.

Например, предположим, что разработчик определяет новый тип Button в файле Button.qml.

// Button.qml
import QtQuick 2.3

Rectangle {
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Button clicked!")
    }
}

Этот тип теперь может быть многократно использован в приложении, как показано ниже:

// application.qml
import QtQuick 2.3

Column {
    Button { width: 50; height: 50 }
    Button { x: 50; width: 100; height: 50; color: "blue" }
    Button { width: 50; height: 50; radius: 8 }
}

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

См. Атрибуты QML объекта для получения более подробной информации о разработке собственных повторно используемых компонентов.

Куда двигаться дальше

Теперь, когда вы увидели QML в действии, вы готовы сделать следующий шаг. Следующая страница поможет вам в вашем путешествии с QML.

• QML Приложения
• Примеры и учебники Qt