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

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

Дополнительную информацию о создании и запуске проектов в 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 — Галерея

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