Suffix option for SpinBox on Qt Quick Controls 2

Question

With Qt Quick Controls, one can specify a suffix in the spinbox (the units of your number), just editing the property "suffix".

I was wondering whether this is possible with Qt Quick Controls 2.0, where this property is not available. Any suggestion how to do that by customizing the spinbox without too much effort?

Answer 1

UPDATE - EASY WAY

import QtQuick 2.9
import QtQuick.Controls 2.2

SpinBox{
    width: 180
    height: 40
    from: 1
    to: 12
    textFromValue: function(value, locale) {
                            return (value === 1 ? qsTr("%1 hour")
                                                : qsTr("%1 hours")).arg(value);
                   }
}

OLD ANSWER

I have created my own Custom SpinBox.

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

SpinBox {
    id: control
    property int buttonWidth: 40
    property int buttonHeight: 40
    property string baseColor: "#007194"
    property string suffix: ""

    value: 50
    editable: true

    contentItem: RowLayout{
        z: 2
        TextInput {
            id: txtInput
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: control.textFromValue(control.value, control.locale)
            font: control.font
            color: Qt.darker(baseColor, control.enabled ? 1 : 0.7)
            selectionColor: baseColor
            selectedTextColor: "#ffffff"
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter

            readOnly: !control.editable
            validator: control.validator
            inputMethodHints: Qt.ImhFormattedNumbersOnly
        }
        Text{
            Layout.preferredWidth: contentWidth
            Layout.fillHeight: true
            z: -1
            font: txtInput.font
            color: txtInput.color
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            text: suffix
        }
    }

    up.indicator: Rectangle {
        x: control.mirrored ? 0 : parent.width - width
        height: parent.height
        implicitWidth: buttonWidth
        implicitHeight: buttonHeight
        color: up.pressed ? "#e4e4e4" : "#f6f6f6"
        border.color: enabled ? baseColor : "#bdbebf"

        Text {
            text: "+"
            font.pixelSize: control.font.pixelSize * 2
            color: Qt.darker(baseColor, control.enabled ? 1 : 0.7)
            anchors.fill: parent
            fontSizeMode: Text.Fit
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    down.indicator: Rectangle {
        x: control.mirrored ? parent.width - width : 0
        height: parent.height
        implicitWidth: buttonWidth
        implicitHeight: buttonHeight
        color: down.pressed ? "#e4e4e4" : "#f6f6f6"
        border.color: enabled ? baseColor : "#bdbebf"

        Text {
            text: "-"
            font.pixelSize: control.font.pixelSize * 2
            color: Qt.darker(baseColor, control.enabled ? 1 : 0.7)
            anchors.fill: parent
            fontSizeMode: Text.Fit
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    background: Rectangle {
        implicitWidth: 140
        border.color: "#bdbebf"
    }
}

May it can fit your needs.