SpinBox

Элемент SpinBox позволяет выбрать числовое значение и предоставляет кнопки для увеличения или уменьшения числа. Например, простейший SpinBox:

import QtQuick
import QtQuick.Controls

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

    SpinBox {
        anchors.centerIn: parent
        value: 50
    }
}

Для управление вводом SpinBox предоставляет ряд свойст, из которых отмечу основные:

• from: начальное значение

• to: конечное значение

• value: текущее введенное значение

• live: определяет, обновляется ли значение, когда пользователь редактирует введенное значение. Если это свойство имеет значение true, а введенное значение находится в пределах допустимого диапазона, значение SpinBox будет установлено. Если это свойство имеет значение false (значение по умолчанию) или введенное значение находится за пределами допустимого диапазона, значение не будет обновляться до тех пор, пока не завершится ввод или пока поле ввода не потеряет фокус.

• stepSize: размер приращения при нажатии на кнопки увеличения/уменьшения

• textFromValue: функция, которая конвертирует значение в строку

• validator: объект валидатора. По умолчанию применяется валидатор чисел - IntValidator

• valueFromText: функция, которая конвертирует строку в число

• wrap: позволяет создать кольцевой список значений - от значения to до значения from и обратно. Для кольцевого выбора значений надо установить значение true. По умолчанию значение - false

Применение некоторых свойств:

import QtQuick
import QtQuick.Controls

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

    SpinBox {
        anchors.centerIn: parent
        from: 0     // 0 - минимальное значение
        to: 100     // 100 - максимальное значение
        stepSize: 10    // 10 - приращение
        value: 50       // 50- текущее значение
    }
}

Обработка выбора значения

При измении значение генерируется сигнал valueModified, который можно обработать с помощью обработчика onValueModified:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"
    Column{
        padding: 5
        SpinBox {
            from: 0     // 0 - минимальное значение
            to: 100     // 100 - максимальное значение
            stepSize: 10    // 10 - приращение
            value: 50       // 50- текущее значение
            onValueModified: { output.text = "Value: " + value}
        }
        Text {
            id: output
            font.pixelSize: 15
        }
    }
}

В данном случае при изменении введенного значения выводим его в элементе Text