首页 > 解决方案 > Qt QML 如何回滚到 ListView 标题?

问题描述

如果我在我的 ListView 中选择一个带有标题的项目,我希望列表在一个简短的动画中向上滚动以将当前选定的项目放在列表的顶部,并且标题向上移动并且不可见。这适用于以下代码。但是,当我想向下滚动以再次查看列表标题时,它总是会回到列表的顶部(第一个)项目。这很可能是由highlightRangeMode: ListView.StrictlyEnforceRange. 但是我怎么能避免这种情况呢?

我试过highlightRangeMode: ListView.ApplyRange让我再次滚动到标题,但这会导致项目通常不会移动到顶部,这是不可接受的。我试过headerPositioning: ListView.PullBackHeader了,但这给了我同样的结果headerPositioning: ListView.PullBackHeader

ListView {
    id: list
    anchors.fill: parent
    clip: true
    spacing: 11
    focus: true
    highlightMoveDuration: 400
    snapMode: ListView.SnapToItem
    preferredHighlightBegin: 0
    preferredHighlightEnd: 100
    highlightRangeMode: ListView.StrictlyEnforceRange

    headerPositioning: ListView.InlineHeader
    header: Rectangle {
                id: headerBar
                height: 116
                color: "blue"
                anchors {
                    left: parent.left
                    right: parent.right
                    leftMargin: 12
                    rightMargin: 12
                }
            }

    model: myModel

    delegate: ListItem {
                  height: 56
                  width: list.width
                  color: "red"
                  onListItemClicked: {
                      list.currentIndex = index
                  }
              }
}

我希望 ListView 中的选定项目始终滚动到列表顶部(在preferredHighlightBeginand内preferredHighlightEnd),并且我可以手动向下滚动以查看 ListView 标题。有谁知道解决方案?

我在如何为 QML ScrollView 中的滚动设置动画?因为我不想使用滚动条。

标签: qtlistviewqmlqt5

解决方案


您可以仅在单击时应用严格范围并在之后将其删除以允许鼠标平滑滚动:

ListView {
    // ....
    highlightRangeMode: ListView.NoHighlightRange

    delegate: ListItem {
        // ...
        onListItemClicked: {
            list.highlightRangeMode = ListView.StrictlyEnforceRange
            list.currentIndex = index
            list.highlightRangeMode = ListView.ApplyRange
        }
    }
}

推荐阅读