Определение свойств QML и сигналы

Элементы QML по умолчанию доступны с некоторым набором встроенных свойств, которые определены непосредственно в классах этих элементов или в их родительских классах. Однако при необходимости мы можем сами определять свои свойства. Для определения свойства в коде QML применяется синтаксис:

property тип_свойства имя_свойства : значение

После слова property идет тип и имя свойства, а через двоеточие указывается значение. Например:

property int count: 0

В данном случае свойство называется "count", оно имеет тип int и значение 0.

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

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 150
    visible: true
    title: "METANIT.COM"
    id: window
    property int count: 0       // свойство count

    Row{
        spacing: 10
        anchors.centerIn: parent
        Button {
            text: "+"
            width: 25
            height: 25
            onClicked: window.count++
        }
        Text{
            text: window.count
        }
        Button {
            text: "-"
            width: 25
            height: 25
            onClicked: window.count--
        }
    }
}

Здесь для элемента Window определено свойство "count", которое по умолчанию равно 0.

id: window
property int count: 0       // свойство count

Свойство text элемента Text привязано к этому свойству

Text{
    text: window.count
}

С помощью кнопок изменяем значение свойства count - увеличиваем или уменьшаем на 1:

onClicked: window.count--

В итоге при нажатии на кнопку изменится текст на текстовой метке:

Связь свойств с сигналами

При объявлении свойства Qt неявно создает сигнал изменения для этого свойства, а также связанный обработчик сигнала, который называется по шаблону "on[PropertyName]Changed", где "PropertyName" — это имя свойства с заглавной первой буквой. Например, для выше определенного свойства count будет создаваться связанный обработчик сигнала — onCountChanged

onCountChanged: {  код обработки сигнала}

Мы можем использовать это для какой-то более сложной обработки изменения свойства. Например:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 150
    visible: true
    title: "METANIT.COM"

    id: window
    property int count: 0

    onCountChanged: {
        console.log("New value: ", count)
    }
    Row{
        anchors.centerIn: parent
        Button {
            text: "+"
            width: 25
            height: 25
            onClicked: window.count++
        }
        Text{
            text: window.count
        }
        Button {
            text: "-"
            width: 25
            height: 25
            onClicked: window.count--
        }
    }
}

В данном случае просто выводим измененное значение свойства на консоль.