Первые шаги с 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.

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

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

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

Вы можете скопировать и вставить фрагменты в это простое приложение «Привет, мир!», чтобы увидеть, как работает 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.

© The Qt Company Ltd
Licensed under the GNU Free Documentation License, Version 1.3.
https://doc.qt.io/qt-5.13/qmlfirststeps.html