Question

我正在尝试使用具有简单标题的ListView，该标题位于列表的顶部。在大多数情况下都可以正常工作。当我手动滚动到顶部时，顶部项目位于标题下方：

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

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

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行始终滚动到标题的后面。因此，使其不透明（例如，以矩形代替背景而不是item），并增加z值使其位于顶部。对于滚动，请使用highlightRangeMode，preferredHighlightBegin和preferredHighlightEnd。

滚动后，标题所覆盖的ListView项目

1 个答案: