setting row/column sizes (in Layouts)
-
Hi all -
The UX team wants their time picker to look like this:
I'm struggling with getting the "HH" and "MM" lined up with the correct tumblers. Here's my latest effort:ColumnLayout { RowLayout { Layout.leftMargin: tumblersRow.x Label { Layout.leftMargin: hoursTumbler.x verticalAlignment: Text.AlignVCenter text: "HH" color: 'purple' } Label { Layout.leftMargin: minutesTumbler.x verticalAlignment: Text.AlignVCenter text: "MM" color: 'purple' } } RowLayout { id: tumblersRow property int rowWidth: 32 Tumbler { id: hoursTumbler } Tumbler { id: minutesTumbler } } }
But it doesn't seem to have any effect. Neither did setting X values.
Can someone tell me what I'm doing wrong? Thanks...
-
Well, I solved this, though I'm not thrilled with the solution. I used a GridLayout in place of the ColumnLayout/RowLayout. There doesn't appear to be a way to apply sizing to a set of rows or columns, so I defined a width for every element:
GridLayout { id: tumblersGrid Label { Layout.preferredWidth: 32 text: "HH" } Item { Layout.preferredWidth: 12 } Label { Layout.preferredWidth: 32 text: "MM" } Item { Layout.preferredWidth: 32 } // start of 2nd row Tumbler { id: hoursTumbler Layout.preferredWidth: 32 // etc.
Functional, but rather cumbersome; I hope someone knows of a better way to do this.
-
The above technique fixed my vertical sizing/alignment, but the rows in my tumbler are too far apart:
My component for the Tumblers is defined as:Component { id: tumblerDelegate // used by Tumblers Label { id: label height: 32 text: timeDialog.formatText(Tumbler.tumbler.count, modelData) color: (Tumbler.displacement === 0) ? 'blue' : 'gray' horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } }
I haven't found a way to alter the row size. Does anyone have an idea on this?
Thanks...
-
@JoeCFD said in setting row/column sizes (in Layouts):
@mzimmers
https://doc.qt.io/qt-6/qml-qtquick-controls-tumbler.html
The API is similar to that of views like ListView and PathView; a model and delegate can be set.Yeah, and so can the contentItem. But that's more complicated than it's worth, IMO. I copped out and used Layout.preferredHeight on the Tumbler items.
I think you know listview very well now.
Getting there...still lots to learn.
Thanks for the suggestions.
-
M mzimmers has marked this topic as solved on
-
@johngod that's definitely an option, and if all my cell sizes were the same, it'd definitely be preferable. In this instance, the grid content has few enough members that my approach is just about as easy. I'll keep your idea in mind when something larger comes along.
Thanks...