Custom spinbox with "classic" spinbox display



  • 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:

    enter image description here

    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:

    enter image description here.

    Thanks a lot and have a good day !



  • @Fheanor It looks like you're using Controls 2. See the documentation for SpinBox; in the end of "Detailed description" there's a link to "Customizing SpinBox" like in all docs of Controls 2 types. You can change the location and size of the buttons. It's not necessarily "easy". Ask if you have some specific questions.



  • @Eeli-K Thanks for your answer, I might try to set my own buttons but it is not so easy.

    I finally found a simple solution that allow me to use QtQuick.Controls.2.x:

    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
        }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.