QML ListView focus on first item except header delegate - qt

Question

I use QML ScrollView and ListView. ListView consists of headerDelegate and delegate:
ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
width: parent.width
height: parent.height
ListView{
id: listView
width: parent.width
height: parent.height
spacing: 10
header: headerDelegate
anchors.fill: parent
property bool isFolded: false
model: MyModel
delegate: mainDelegate
}
}
Everytime ListView is scrolled to the top the first mainDelegate is shown instead of headerDelegate which remains hidden. How can I force the scroll to correctly show headerDelegate?

Answer 1

The problem here is that ScrollView expects child's contentY to be equal 0 but ListView positions the first item of the model at contentY = 0 and places header item before it. If ListView.header is 50px high then it is positioned at ListView.contentY = -50.
The solution that worked for me was to emit ListView.contentYChanged() signal. It causes ScrollView to update. Let me know if this solves your issue.
ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
width: parent.width
height: parent.height
ListView{
id: listView
width: parent.width
height: parent.height
spacing: 10
header: headerDelegate
anchors.fill: parent
property bool isFolded: false
model: listModel
delegate: mainDelegate
onContentYChanged: console.log(contentY)
Component.onCompleted: {
contentYChanged()
}
}
}

Answer 2

I've changed listView.contentY manually. After finally loading header (I got event) I've set listView.contentY = 0 - headerDelegateView.height and it works. #Filip Hazubski thank you for good way of solution!
example code
Rectangle
{
id: headerDelegateView
WebEngineView{
...
onLoadingChanged: {
if (loadRequest.status === WebEngineView.LoadSucceededStatus) {
... // here I calculate web page height by java script and set to headerDelegateView.height
listView.contentY = 0 - headerDelegateView.height
}
ScrollView {
...
ListView{
id: listView
...
}
}
}