JS function not returning expected value

mzimmers

Hi all -

I tried moving a width calculation out of QML into a JS function, but it's not returning the correct value.

Flickable {
    id: flickable
    property real netWidth: flickable.width - (scroller.width * 2.0)

    GridLayout {
        id: equipmentGrid

        property int nbrColumns: 4
        
        // this works as expected
        property real tileWidth: (flickable.netWidth - 
                                 (mainWindow.gutter * (nbrColumns - 1))) / nbrColumns

        // this doesn't work
//      property real tileWidth: Fn.getColumnWidth(nbrColumns, flickable.netWidth)

    }
    ScrollBar.vertical: Scrollbar_custom {
        id: scroller
    }
}

Here's the JS function:

function getColumnWidth(nbrCols, totalWidth) {
    var colWidth

    colWidth = (width -
                (mainWindow.gutter * (nbrCols - 1))) / nbrCols
    if (colWidth < 0) {
        colWidth = 0
    }

    return colWidth;
}

The problem appears to be related to the value of the scroller width. Using the function, it seems to be 0. I'm guessing that this has something to do with when the function is actually called, evidently prior to the creation of the scroller, and therefore the setting of its width.

Can anyone shed some light on this? This particular problem is easy enough to work around, but I'd like to have a better understanding of what's going on for the future.

Thanks...

JoeCFD

Try this? I guess widgets sizes are not available at the beginning.

    property real netWidth: 0

    Component.onCompleted: {
        netWidth = flickable.width - (scroller.width * 2.0)
    }

mzimmers

@JoeCFD that didn't change anything.

JoeCFD

@mzimmers use console.log() to print out values of them

mzimmers

@JoeCFD this is weird:

    Flickable {
        id: flickable

        Layout.fillHeight: true
        Layout.fillWidth: true
        clip: true
        contentHeight: equipmentGrid.height
        property real netWidth: 0//flickable.width - (scroller.width * 2.0)
        Component.onCompleted: {
            netWidth = flickable.width - (scroller.width * 2.0)
            console.log("flickable.width is " + flickable.width)
            console.log("netWidth is " + netWidth)
            console.log("scroller.width is " + scroller.width)
        }
...

qml: flickable.width is 48 // ???
qml: netWidth is 28
qml: scroller.width is 10

Could part of the problem be that my flickable is inside a ColumnLayout?