CODEWITHSUNDEEP
qtscrollqmlscrollviewqtquick2
Sergey Prepodobny
Sergey Prepodobny

Reputation: 47

QML ListView focus on first item except header delegate

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?

Upvotes: 0

Views: 1740

Answers (2)

Sergey Prepodobny
Sergey Prepodobny

Reputation: 47

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
   ...
    }
}
}

Upvotes: 1

Filip Hazubski
Filip Hazubski

Reputation: 1728

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()
        }
    }
}

Upvotes: 1

Related Questions