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

Layout and wrapping problems with a rotated SpinBox



  • I'm relatively new to QML, so the solution to this problem might be quite simple.
    I've got several SpinBox controls, and I would like for the numbers they control to display side-by-side, with the corresponding + and - buttons above and below the numbers, respectively, rather than between them. Setting the rotation for the SpinBox to -90 achieves that result. However, it had a couple of unfortunate side effects.
    First of all, layout classes like Row and Column seem to layout these rotated SpinBoxes according to their unrotated dimensions. I was able to fix the problem by wrapping the SpinBox in an Item with it's width set to the SpinBox's height, and vice-versa.
    Secondly, the numbers displayed were also rotated along with the SpinBoxes.. I figured out how to locate the item where they were displayed, and rotated it backwards. However, this fix only works if wrap is false. If it's true (which is what I want to use), it doesn't work. I haven't the foggiest idea why wrap would interact with rotation this way.
    Here's my workarounds for both problems:

                    Item{
                        anchors {
                            verticalCenter: parent.verticalCenter
                        }
                        height: alarmMonth.width
                        width: alarmMonth.height
                        SpinBox{
                            id: alarmMonth
                            anchors {
                                centerIn: parent
                            }
                            from: 1
                            to: 12
                            // wrap: true
                            rotation:-90
                            property Item display: children[0];
                            textFromValue: function(value, locale) {
                                return Number(value).toString().padStart(2,"0");
                            }
                            Component.onCompleted: {
                                display.rotation = 90;
                            }
                        }
                    }
    

    Is there some way to make this work with a wrapping SpinBox? Is there a better way to work around either of these problems?


Log in to reply