QML ListView сосредоточиться на первом элементе, кроме заголовка делегата

Question

Я использую QML ScrollView и ListView. ListView состоит из headerDelegate и 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 прокручивается к вершине первого mainDelegate показан вместо headerDelegate который остается скрытым. Как заставить свиток правильно показать headerDelegate?

Answer 1

Проблема здесь состоит в том, что ScrollView ожидает ребенка contentY равным 0 но ListView позиционирует первый пункт модели на contentY = 0 и помещает элемент заголовка перед ним. Если ListView.header - 50px высокий, то он находится на ListView.contentY = -50.

Решение, которое сработало для меня, должно было излучать сигнал ListView.contentYChanged(). Он вызывает обновление ScrollView. Дайте мне знать, если это решит вашу проблему.

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

Я изменил listView.contentY вручную. После окончательного загрузки заголовка (я получил событие) я установил listView.contentY = 0 - headerDelegateView.height, и он работает. @Filip Hazubski благодарит вас за хороший способ решения!

пример кода

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