Custom spinbox with "classic" spinbox display

Question

I need to use a double spinbox for my QML view and in this case, I based my spinbox on this example .

SpinBox {
    id: spinbox
    from: 0
    value: 110
    to: 100 * 100
    stepSize: 100
    anchors.centerIn: parent

    property int decimals: 2
    property real realValue: value / 100

    validator: DoubleValidator {
        bottom: Math.min(spinbox.from, spinbox.to)
        top:  Math.max(spinbox.from, spinbox.to)
    }

    textFromValue: function(value, locale) {
        return Number(value / 100).toLocaleString(locale, 'f', spinbox.decimals)
    }

    valueFromText: function(text, locale) {
        return Number.fromLocaleString(locale, text) * 100
    }
}

It seems that when you use a custom spinbox, it is not displayed as a "classic" spinbox. It is displayed like this:

However, buttons are too big for my interface. I would like to know is there is a easy way to display the spinbox as a "classic" spinbox like this:

.

Answer 1

If you have no reservations on using the old QtQuick.Controls 1.x in your project...
You can use both QtQuick.Controls 1.x and QtQuick.Controls 2.0 in the same file, by using prefixes.

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls 1.4 as OldCtrl

ApplicationWindow {  // Unprefixed, therefor from the new QtQuick.Controls 2.0
    id: root
    visible: true
    width: 400; height: 450

    OldCtrl.SpinBox {
        width: 100
        value: 20
        decimals: 2
    }
}

Here is the documentation for this SpinBox

If you want to use the QtQuick.Controls 2.x, then you can define custom Items for up.indicator and down.indicator

SpinBox {
    id: sb
    value: 20
    up.indicator: Rectangle {
        height: parent.height / 2
        anchors.right: parent.right
        anchors.top: parent.top
        implicitHeight: 40
        implicitWidth: 40 // Adjust width here
        color: sb.up.pressed ? "#e4e4e4" : "#f6f6f6"
        border.color: enabled ? "#21be2b" : "#bdbebf"
        Text {
            text: '+'
            anchors.centerIn: parent
        }
    }
    down.indicator: Rectangle {
        height: parent.height / 2
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        implicitHeight: 40
        implicitWidth: 40 // Adjust width here
        color: sb.down.pressed ? "#e4e4e4" : "#f6f6f6"
        border.color: enabled ? "#21be2b" : "#bdbebf"
        Text {
            text: '-'
            anchors.centerIn: parent
        }
    }
}