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

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

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

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

Для использования модуля 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. Свойство parent объекта 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.12
import QtQuick.Controls 2.12

//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 и демонстрируют различные элементы управления и макеты.

• Основные макеты
• Qt Quick Controls — Галерея

Не стесняйтесь копировать и вставлять фрагменты в это простое приложение "Hello World", чтобы увидеть, как работает QML.

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

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

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

import QtQuick 2.12

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

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

    TapHandler {
        onTapped: parent.color = "blue"
    }
}

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

Примечание: TapHandler также излучает сигнал tapped для событий касания, поэтому этот код также будет работать на мобильном устройстве.

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

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 позволяет определять такие вещи как повторно используемые пользовательские типы, чтобы минимизировать дублирование кода и максимизировать читаемость.

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

// MessageLabel.qml
import QtQuick 2.12

Rectangle {
    height: 50
    property string message: "debug message"
    property var msgType: ["debug", "warning" , "critical"]
    color: "black"

    Column {
        anchors.fill: parent
        padding: 5.0
        spacing: 2
        Text {
            text: msgType.toString().toUpperCase() + ":"
            font.bold: msgType == "critical"
            font.family: "Terminal Regular"
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            ColorAnimation on color {
                running: msgType == "critical"
                from: "red"
                to: "black"
                duration: 1000
                loops: msgType == "critical" ? Animation.Infinite : 1
            }
        }
        Text {
            text: message
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            font.family: "Terminal Regular"
        }
    }

}

Этот тип теперь можно повторно использовать несколько раз в приложении следующим образом:

// application.qml import QtQuick 2.12 Column { width: 180 height: 180 padding: 1.5 topPadding: 10.0 bottomPadding: 10.0 spacing: 5 MessageLabel{ width: parent.width - 2 msgType: "debug" } MessageLabel { width: parent.width - 2 message: "This is a warning!" msgType: "warning" } MessageLabel { width: parent.width - 2 message: "A critical warning!" msgType: "critical" } }

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

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

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

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

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