setting row/column sizes (in Layouts)

mzimmers

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

mzimmers

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.

mzimmers

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

@mzimmers does GridLayout::rowSpacing help?

mzimmers

@JoeCFD I've already done that. I don't think that anything applied to the GridLayout will affect the internal spacing of the Tumbler; I need to do something to the Tumbler(s) itself.

JoeCFD

@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.

I think you know listview very well now.

mzimmers

@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.

johngod

@mzimmers In your delegate, trying using a rectangle with your desired size and put the Label inside the rectangle with anchoring to fill the rectangle

mzimmers

@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...

johngod

@mzimmers Maybe overkill, but another option would be a model view and delegate with a rectangle, and use a size property in the model, so you can have different sizes in your view rectangles