滚动后 header 覆盖的 ListView 项目

Question

我正在尝试将 ListView 与简单的 header 一起使用，它位于列表的顶部。它适用于大多数情况。当我手动滚动到顶部时，顶部项目位于 header:

下方

当我从列表外部设置当前索引以突出显示某个项目时，列表会滚动到突出显示的项目。这是预期和期望的行为。然而，列表以某种方式滚动，突出显示的项目将与 header 处于相同的高度 (y)。因此 header 部分覆盖了该项目。图中header是透明的，高光是浅绿色：

如何设置列表，使列表内容始终从 header 下方开始？或者作为解决方法，如何在自动滚动选择后设置当前项目的高度？为了完整起见，这里是我列表的当前代码。

ListView {
    id: particleList
    anchors.fill: parent
    model: particleModel
    clip: true
    highlight: Rectangle { color: Material.color(Material.Green); opacity: 0.2}
    highlightMoveDuration: Style.animationDurationMedium
    headerPositioning: ListView.OverlayHeader
    header: Item {
        height: 40
        anchors.left: parent.left
        anchors.right: parent.right
        Row {
            anchors.fill: parent
            MediumText {
                horizontalAlignment: Text.AlignHCenter
                width: parent.width / 3
                text: qsTr("Width")
            }
            MediumText {
                horizontalAlignment: Text.AlignHCenter
                width: parent.width / 3
                text: qsTr("Height")
            }
            MediumText {
                horizontalAlignment: Text.AlignHCenter
                width: parent.width / 3
                text: qsTr("Area")
            }
        }
    }
    footer: SmallText {
        anchors.left: parent.left
        anchors.right: parent.right
        text: particleModel.count
    }

    populate: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }

    delegate: Item {
        height: 40
        anchors.left: parent.left
        anchors.right: parent.right

        Row {
            anchors.fill: parent
            MediumText {
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width / 3
                text: model.width
                horizontalAlignment: Text.AlignRight
                rightPadding: 20
            }
            MediumText {
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width / 3
                text: model.height
                horizontalAlignment: Text.AlignRight
                rightPadding: 20
            }
            MediumText {
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width / 3
                text: model.area
                horizontalAlignment: Text.AlignRight
                rightPadding: 20
            }
        }
        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            height: 1
            visible: model.index !== 0
            color: Material.color(Material.Grey)
        }
    }
}

Answer 1

Listview 行始终滚动到 header 之后。因此，使其不透明（例如，带有背景而不是项目的矩形）并增加 z 值以使其位于顶部。对于滚动使用 highlightRangeMode、preferredHighlightBegin 和 preferredHighlightEnd.

滚动后 header 覆盖的 ListView 项目

ListView item covered by header after scrolling

qt

qml

qt5

qtquick2