Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

SpinBox value not vertically aligned



  • Hi,

    I manually set the height to a spin box to be aligned to some text. Result is that the value is not centered any more.
    SpinBox
    How can I get the number back in the center on a small spinbox?

    The code I use so far:

    import QtQuick 2.6
    import QtQuick.Controls 2.0
    
    SpinBox {
        id: control
        editable: true
    
        contentItem: TextInput {
            z: 2
            text: control.textFromValue(control.value, control.locale)
    
            font: control.font
            color: "#21be2b"
            selectionColor: "#21be2b"
            selectedTextColor: "#ffffff"
            height: control.height
            padding: 0
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter
    
            readOnly: !control.editable
            validator: control.validator
            inputMethodHints: Qt.ImhFormattedNumbersOnly
        }
    
        up.indicator: Rectangle {
            x: control.mirrored ? 0 : parent.width - width
            height: parent.height
            implicitWidth: control.width < 80 ? control.width*0.25:40
            implicitHeight: control.height
            color: control.up.pressed ? "#e4e4e4" : "#f6f6f6"
            border.color: enabled ? "#21be2b" : "#bdbebf"
    
            Text {
                text: "+"
                font.pixelSize: control.font.pixelSize * 2
                color: "#21be2b"
                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: control.width < 80 ? control.width*0.25:40
            implicitHeight: control.height
            color: control.down.pressed ? "#e4e4e4" : "#f6f6f6"
            border.color: enabled ? "#21be2b" : "#bdbebf"
    
            Text {
                text: "-"
                font.pixelSize: control.font.pixelSize * 2
                color: "#21be2b"
                anchors.fill: parent
                fontSizeMode: Text.Fit
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
    
        background: Rectangle {
            implicitWidth: 140
            border.color: "#bdbebf"
        }
    }
    
    

    Thanks =)



  • Your code, when compiled shows the number where it should be;

    Capture.JPG

    Perhaps you should include the 'some text' you want to align with.



  • In my example I had set the height to 20. At a height of 30 it starts to be centered again. But 30 is too big for my application. Why can't it be smaller than 30 pixels?



  • Looks like you copy and pasted the example of Customising SpinBox and you've made subtle alterations to the code. If I change the implicit height/width, the numbers stay centered. Repaste the original code back into your project and try again.



  • The above code is the code I use. I stored it as NumberInput.qml and included it in my main.qml. Here how I use it as delegate in a ListView:

    Component {
                    id: itemListDelegate
                    Row {
                        spacing: 3
    
                        Label {
                            id: itemNameLabel
                            text: model.item
                            width: 240
                            clip: true
                            // this results in a height of 20 px
    
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    itemList.selectedIndex = model.index
                                    var pos = mapToGlobal(mouseX, mouseY)
    
                                    if(root.height - itemMenu.height < pos.y){
                                        itemMenu.popup(Qt.point(pos.x,root.height - itemMenu.height))
                                    }
    
                                    itemMenu.popup()
                                }
                            }
                        }
                        NumberInput{
                            value: model.amount
                            width: 79
                            height: itemNameLabel.height
                            editable: false
    
                            onValueModified: {
                                var nWeight = (value - model.amount)*model.weight
                                [...]
                                model.amount = value
                            }
                        }
                        Label {
                            text: model.weight
                            width: 50
                        }
                        Label {
                            text: model.price
                            width: 50
                        }
                    }
                }
    

    I see the same issue when using a regular SpinBox
    In case I increase the height of the label by font.pixelSize: Qt.application.font.pixelSize*1.8 the Display starts to be okay.

    My qtquickcontrols2.conf looks like this

    [Controls]
    Style=Universal
    
    [Material]
    Theme=Light
    

Log in to reply