如何使用非附加滚动条滚动 ListView，其中代表具有不同的高度？

问题描述

说明

这个问题是 another question 的逻辑延续，尚未完全回答。如果代表具有不同的高度，则 contentHeight 值将随着显示的代表的变化而不断变化。因此，如果有任何组件依赖于 contentHeight，它们也会根据新值更改其行为。

因此，例如，ScrollBar attached 到 ListView 将在滚动期间在视觉上表现 queerly（位置和大小的任意变化取决于内容） .

要解决此问题，it was suggested 使用 non-attached scrollbars。但是，这也存在问题。

代码

main.qml：

import QtQuick 2.11
import QtQuick.Controls 2.12
import "."

applicationwindow {
    id: root
    visible: true
    width: 1280
    height: 920

    PMListView {
        id: listView
        anchors.centerIn: parent
        width: parent.width / 2.5
        height: parent.height - 40
        model: 41

        delegate: Rectangle {
            id: delegate
            width: listView.width
            height: 50 + (model.index % 3 == 0 ? randomInteger(450,700) : 0)
            color: "grey"
            border {
                width: 2
                color: model.index % 3 ? "green" : "blue"
            }

            Text {
                id: indexText
                anchors.centerIn: parent
                text: model.index
                font.pointSize: 22
                color: "white"
            }
        }

        Component.onCompleted: {
            var totalHeight = 0
            for (var i = 0; i < listView.count; ++i) {
                listView.currentIndex = i
                totalHeight += listView.currentItem.height
            }
            listView.totalHeight = totalHeight
        }
    }

    function randomInteger(min,max) {
        let rand = min + Math.random() * (max + 1 - min)
        return Math.floor(rand)
    }
}

PMListView.qml：

import QtQuick 2.9
import QtQuick.Controls 2.2

ListView {
    id: root
    focus: true
    clip: true
    interactive: false
    currentIndex: -1

    property var totalHeight

    ScrollBar {
        id: vbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Vertical
        size: root.height / (root.totalHeight + 1)
        stepSize: 0.035
        anchors {
            top: parent.top
            right: parent.right
            bottom: parent.bottom
        }

        onPositionChanged: {
            root.contentY = vbar.position * root.totalHeight
        }
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.NoButton
        propagateComposedEvents: true
        onWheel: {
            if (root.contentHeight > 0) {
                if (wheel.angleDelta.y > 0) {
                    vbar.decrease()
                }
                else {
                    vbar.increase()
                }

                // force readjust on top and bottom positions (otherwise content may be shifted wrong way)
                if (root.atYBeginning) {
                    root.positionViewAtBeginning()
                }
                if (root.atYEnd) {
                    root.positionViewAtEnd()
                }
            }
        }
    }
}

如果你注意vbar中的组件PMListView.qml，那么你可以注意到我想要实现的以下模式：如果滚动的位置发生变化，那么列表的内容应该也会改变（会发生滚动）。但是，在这里我遇到了更改 contentHeight 属性的相同问题：如果 contentHeight 属性发生更改，则更改 contentY 属性不能再保证我们将到达滚动条的位置点。

最后，我们似乎可以将 ListView 滚动到最后，但有些内容会留在外面：image description。

问题

那么，如何使用非附加滚动条在其位置和ListView内容的显示之间建立依赖关系，其中如果ScrollBar在开头，则内容ListView 的内容在开头显示，如果在结尾，则内容在结尾。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）