derive dimensions from Repeater

mzimmers

Hi all -

I'm trying to set the contentHeight of a Flickable. Here's what I'm trying:

Column {
    Flickable {
        id: flickable
        height: 300
        width: mainWindow.width
        contentHeight: flickable.childrenRect.height // <-- doesn't work
        contentHeight: 500//flickable.childrenRect.height // <-- works
        contentWidth: mainWindow.width
        clip: true
        
        Column {
            Repeater {
                id: repeater
                model: 5
                delegate: Rectangle {
                    implicitWidth: mainWindow.width
                    implicitHeight: 100
                    color: 'red'
                }
            }
        }
    }
}

But it's not working correctly. According to a console log I put in, flickable.childrenRect.height resolves to 0, so I guess this isn't one of the places I can use childrenRect. What alternatives might I have for this?

Thanks...

GrecKo

@mzimmers
give an id to your Column and then just do:

contentWidth: width
contentHeight: column.height

The implicit height of a column is the sum its children height and the spacing.

In general when your are using childrenRect you are doing something wrong.

Alternatively you could use a ScrollView instead of a Flickable, define a width for your Column and you wouldn't have to set contentWidth and contentHeight

JoeCFD

@mzimmers
they are available in

Component.onCompleted: print(childrenRect)

from here:
https://doc.qt.io/qt-6/qml-qtquick-item.html#childrenRect-prop

but not at beginning.

mzimmers

@JoeCFD if I understand you, that value is calculated when needed, but I'm "grabbing" it too early? If so, I don't know what to do about that. I tried using a function, and Component.onCompleted, but the result is the same.

JoeCFD

@mzimmers think about if there is a layout in it and the sizes of items may not be decided at the beginning.

JoeCFD

@JoeCFD there could be more than that.
https://stackoverflow.com/questions/45088883/childrenrect-always-returns-0

mzimmers

@JoeCFD no layouts - the example code I posted above is inside an ApplicationWindow.

JoeCFD

@mzimmers I know. I said "think about if."

mzimmers

@JoeCFD said in derive dimensions from Repeater:

@JoeCFD there could be more than that.
https://stackoverflow.com/questions/45088883/childrenrect-always-returns-0

Wow...that is as ugly as farm subsidies. I confirmed that it worked, but I'm not completely happy with it, given what the SO solution says:

But I must say it is bad practice for a component to make assumptions about things outside its own QML file, as it makes the component difficult to reuse.

There must be a better way to do this -- I'm sure that many people must need to automatically calculate the contents of their Repeaters.

Anyway, here's the corrected (and slightly more elaborate) code for anyone interested:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    visible: true
    width: 800
    height: 480
    Column {
        id: col
        Flickable {
            id: flickable
            height: 300
            width: mainWindow.width
            contentHeight: flickable.children[0].childrenRect.height // ugh
            contentWidth: mainWindow.width
            boundsBehavior: Flickable.StopAtBounds
            clip: true

            Column {
                Repeater {
                    id: repeater
                    property list<color> rectColors: ["red", "green", "blue", "yellow", "orange"]
                    model: rectColors
                    delegate: Rectangle {
                        implicitWidth: mainWindow.width - (scroller.width * 2)
                        implicitHeight: 100
                        color: modelData
                    }
                }
            }
            ScrollBar.vertical: ScrollBar {
                id: scroller
                implicitWidth: 10
            }
        }
    }
}

I think @JoeCFD might have found the only solution, but I'm going to leave this topic open for a bit to see if anyone has any other ideas.

GrecKo

@mzimmers
give an id to your Column and then just do:

contentWidth: width
contentHeight: column.height

The implicit height of a column is the sum its children height and the spacing.

In general when your are using childrenRect you are doing something wrong.

Alternatively you could use a ScrollView instead of a Flickable, define a width for your Column and you wouldn't have to set contentWidth and contentHeight

mzimmers

@GrecKo said in derive dimensions from Repeater:

Alternatively you could use a ScrollView instead of a Flickable

This is a great idea. I had to add a couple properties (size and anchors) to the ScrollBar to make it look as it would for a Flickable, but this does simplify matters a lot. Thanks for the suggestion!