QML ListView：高亮滚动至特定位置时修改其行为

需求说明 #

• 当高亮项位于列表顶部区域时，仅移动高亮项，列表保持静止
• 当高亮项处于屏幕中间区域时，列表向上滚动，高亮项固定在中间位置

修改后的代码 #

ListView {
    id: collectionAxis

    anchors {
        top: parent.top
        bottom: parent.bottom
        horizontalCenter: parent.horizontalCenter
        topMargin: vpx(150)
        bottomMargin: vpx(150)
    }

    model: 100
    delegate: collectionAxisDelegate
    spacing: vpx(20)

    // 启用高亮范围控制模式
    highlightRangeMode: ListView.ApplyRange
    // 设置高亮偏好区域的起始位置（可根据需求调整）
    preferredHighlightBegin: height / 3
    // 设置高亮偏好区域的结束位置（可根据需求调整）
    preferredHighlightEnd: height * 2 / 3

    highlight: Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        width: vpx(20)
        height: vpx(20)
        color: "#2196F3" // 添加颜色便于观察高亮位置
    }
}

关键逻辑解释 #

• highlightRangeMode: ListView.ApplyRange：这个属性控制ListView滚动行为与高亮项的关联。当高亮项处于preferredHighlightBegin和preferredHighlightEnd定义的区域内时，ListView会自动滚动以维持高亮项在该区域；当高亮项移出这个区域（比如到达列表顶部），ListView停止滚动，仅让高亮项自身移动。
• preferredHighlightBegin 和 preferredHighlightEnd：定义高亮项需要保持的中间区域。如果需要让高亮严格居中，可将值设置为 height/2 - delegateHeight/2 和 height/2 + delegateHeight/2（需提前获取代理项高度）。
• 若需更精细的顶部触发判断，可结合onHighlightPositionChanged信号，通过计算高亮项Y坐标与ListView顶部边距的关系，手动控制滚动或高亮移动，但上述属性配置已能满足基础需求。

内容的提问来源于stack exchange，提问作者erul