QML TableView: Binding loop detected for property "__scrollBarTopMargin"

Question

I'm simply trying to create a TableView in my QML file, like so -

TableView {
        id: resultListTableView
        anchors.fill: parent
        rowDelegate: Rectangle {
            color: "#D3D3D3"
            height: 30
        }

        itemDelegate: Rectangle {
            width: 100
            height: 50
            border.color: "#000000"
            border.width: 1
            Text {
                id: textItem
                text: styleData.value
                anchors.fill: parent
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                elide: Text.ElideRight
            }
        }

        headerDelegate: Rectangle {
            height: textItem.implicitHeight * 1.2
            width: textItem.implicitWidth
            color: "lightsteelblue"
            Text {
                id: textItem
                anchors.centerIn: parent
                text: styleData.value
                elide: Text.ElideRight
            }
        }

        TableViewColumn {
            role: "file"
            title: "File"
            width: resultListTableView.viewport.width * 0.3
            movable: false
            resizable: false
        }
        TableViewColumn {
            role: "type"
            title: "Type"
            width: resultListTableView.viewport.width * 0.2
            movable: false
            resizable: false
        }
        TableViewColumn {
            role: "size"
            title: "Size"
            width: resultListTableView.viewport.width * 0.2
            movable: false
            resizable: false
        }
        TableViewColumn {
            role: "path"
            title: "Path"
            width: resultListTableView.viewport.width * 0.3
            movable: false
            resizable: false
        }

        model: ResultListDataModel {}
        onDoubleClicked: {
            const element = model.get(row)
            console.log("Downloading file ", element.file, "of size", element.size)
        }
    }

This component is part of a TabView and shows up when the corresponding tab is clicked. When the tab is clicked though, I randomly get a binding loop warning:

QML TableView: Binding loop detected for property "__scrollBarTopMargin"

I'm not doing anything that might result in this binding loop, so I'm wondering where the issue is. Anybody knows what's going on here?

Evan · Answer 1 · 2019-10-25T13:10:33.397

1

Pure speculation without a Qt dev environment handy, but I'd guess the viewport depends on the width of the columns, while the width of the columns now depends on the viewport.

Hacking out the four lines that set width for the columns would prove or disprove real quick.

If that wild guess didn't work, from the source here, https://github.com/qt-creator/qt-creator/blob/master/tests/auto/qml/codemodel/importscheck/005_compositeQmlCopyAndCpp/QtQuick/Controls/TableView.qml, I see __scrollBarTopMargin: (__style && __style.transientScrollBars || Qt.platform.os === "osx") ? headerrow.height : 0.

You might consider hacking out your header delegate to see if that removes the warning.

Oh wow, that ID duplication was subtle. As you said yourself, it seems that having the duplicated ID messed with your sizing. Wish that was the first warning you got, not the crazy one you actually got.

edited Oct 25 '19 at 13:10

answered Oct 21 '19 at 17:23

Evan

2,441
23
36

Looks like you're right. I'll test it a bit more to confirm and then accept your answer. Thanks! – gravetii Oct 22 '19 at 06:01
The issue seems to be the height and width properties of the headerDelegate, though I don't exactly understand why. If I remove the height and width properties, it does indeed work, but the look of the header gets totally messed up. As you can see, I don't have much experience with QML. Any ideas? – gravetii Oct 22 '19 at 13:42
Another shot in the dark, but I wonder if explicitly setting height and width instead of setting the delegate's implied height and width is causing this. If you switch those lines to set implied height and width, do you get the desired behavior without the warning? – Evan Oct 22 '19 at 14:45
Did you mean implicitHeight & implicitWidth? If yes, that doesn't work either. – gravetii Oct 22 '19 at 15:23
I did mean implictHeight and implicitWidth. Man, examples on header delegates are few and far between. I wonder if trying to set the height of the rectangle from within the delegate is the right approach, but I'm not able to point to an example or counter example. I'm a year and a half stale in QtQuick as well. If you simply don't set those properties, I'm assuming something goes visually wrong? – Evan Oct 22 '19 at 16:44
Yeah, if I don't set those properties, it just goes haywire. There's hardly any documentation or examples out there which makes it even more difficult to understand what's going on. It's still a warning only, but I believe these binding loops are always tricky and I'm sure ignoring them is going to cause a hell lot of pain later on. – gravetii Oct 22 '19 at 17:17
I may have stumbled across a very similar example. He sets his delegate under the TableViewStyle instead. Might try that. https://stackoverflow.com/questions/25945229/how-to-change-the-color-background-text-of-header-of-tableview-in-qt5 – Evan Oct 23 '19 at 17:46
Yeah, I saw that one too. I've tried using the TableViewStyle but it doesn't solve this issue. – gravetii Oct 24 '19 at 06:56
The issue is that I'm using the `textItem` id twice. Fixing that resolved the issue. Thanks for all the help. If you wish, you can add it to your answer and I'll accept it. Might as well help someone who's made the same mistake. – gravetii Oct 25 '19 at 06:06

QML TableView: Binding loop detected for property "__scrollBarTopMargin"

1 Answers1