qml учебник
Начало работы с qml

замечания

Версии

Монтаж

QML поставляется с более новой версией кросс-платформенной платформы Qt . Вы можете найти новую версию Qt в разделе « Загрузки» .

Чтобы создать новый проект QML в среде разработки Qt Creator , выберите «Файл -> Создать ...», а в разделе «Приложения» выберите «Быстрое приложение Qt». После нажатия «select» вы можете теперь назвать и установить путь для этого проекта. После нажатия «next» вы можете выбрать, какие компоненты вы хотите использовать, если не уверены, просто оставьте значение по умолчанию и нажмите «Далее». Два следующих шага позволят вам настроить Kit и Source Control, если хотите, в противном случае сохраните настройки по умолчанию.

Теперь вы создали простое и готовое к использованию приложение QML.

Привет, мир

Простое приложение, показывающее текст «Hello World» в центре окна.

import QtQuick 2.3
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") //The method qsTr() is used for translations from one language to other.

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}

Создание простой кнопки

Вы можете легко преобразовать каждый компонент нажатием кнопки с помощью компонента MouseArea. В приведенном ниже коде показано окно 360x360 с кнопкой и текстом в центре; нажатие кнопки изменит текст:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: button

        width: 100
        height: 30
        color: "red"
        radius: 5     // Let's round the rectangle's corner a bit, so it resembles more a button
        anchors.centerIn: parent

        Text {
            id: buttonText
            text: qsTr("Button")
            color: "white"
            anchors.centerIn: parent
        }

        MouseArea {
            // We make the MouseArea as big as its parent, i.e. the rectangle. So pressing anywhere on the button will trigger the event
            anchors.fill: parent

            // Exploit the built-in "clicked" signal of the MouseArea component to do something when the MouseArea is clicked.
            // Note that the code associated to the signal is plain JavaScript. We can reference any QML objects by using their IDs
            onClicked: {
                buttonText.text = qsTr("Clicked");
                buttonText.color = "black";
            }
        }
    }
}

Отображение изображения

В этом примере показано простейшее использование компонента Image для отображения изображения.

Свойство source изображения - это тип URL-адреса, который может быть либо файлом с абсолютным, либо относительным путем, URL-адресом Интернета ( http:// ) или ресурсом Qt ( qrc:/ )

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

Событие мыши

В этом примере показано, как событие мыши используется в QML.

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    Rectangle {
        anchors.fill: parent
        width: 120; height: 240
        color: "#4B7A4A"

        MouseArea {
            anchors.fill: parent // set mouse area (i.e. covering the entire rectangle.)
            acceptedButtons:  Qt.AllButtons
            onClicked: {
                // print to console mouse location
                console.log("Mouse Clicked.")
                console.log("Mouse Location: <",mouseX,",",mouseY,">")

                //change Rectangle color
                if ( mouse.button === Qt.RightButton )
                    parent.color = 'blue'
                if ( mouse.button === Qt.LeftButton )
                    parent.color = 'red'
                if ( mouse.button === Qt.MiddleButton )
                    parent.color = 'yellow'
            }
            onReleased: {
                // print to console
                console.log("Mouse Released.")
            }
            onDoubleClicked: {
                // print to console
                console.log("Mouse Double Clicked.")
            }

        }
    }


}