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

每次ListView滚动到顶部时，会显示第一个mainDelegate而不是隐藏的headerDelegate。headerDelegate如何强制滚动显示A=array(); A[0]=>name = "John"; A[0]=>lastname = "Blabla"; A[0]=>genre = "Male"; A[1]=>name = "Cheryl"; A[1]=>lastname = "Blabla"; A[1]=>genre = "Female";？

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

QML ListView专注于除头部委托之外的第一个项目

2 个答案: