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?