Qt/QML: How to bidirectional sync ScrollView in QML?

Question

I want to sync contentY of two scrollable listviews as shown in this simplified code

Item {
    SplitView {
        orientation: Qt.Horizontal

        Component1 {
            id: left
            contentY: right.contentY
        }
        Component1 {
            id: right
            contentY: left.contentY
        } 
    }
}

//Component1.qml

Item {
    property alias contentY: component2.contentY

    Component2 {
        id: component2
    }
}

//Component2.qml

Item {
    property alias contentY: list.contentY

    ScrollView {
        ListView {
            id: list
        }
    }
}

It's working when I start or reload the QML scene and keep scrolling in only one splitview. However, as soon as I start scrolling in the other listview, the bidirectional binding is broken and contentY isn't in sync anymore. I can only scroll the listviews separately from each other. How can I avoid this? Is there a better way to sync contentY?

flaskoln flaskoln · Accepted Answer · 2020-03-08T16:19:49

I found a solution which seems to work:

Item {
    SplitView {
        orientation: Qt.Horizontal
        
        Component1 {
            id: left
            Binding {
                target: right
                property: "contentY"
                value: left.contentY
            }
        }
        Component1 {
            id: right
            Binding {
                target: left
                property: "contentY"
                value: right.contentY
            }
        } 
    }
}

//Component1.qml

Item {
    property alias contentY: component2.contentY
    
    Component2 {
        id: component2
    }
}

//Component2.qml

Item {
    property alias contentY: list.contentY

    ScrollView {
        ListView {
            id:list
        }
    }
}

However, if there is a better solution I would be thankful for any hint :)

Qt/QML: How to bidirectional sync ScrollView in QML?

1 Answers