QML 中 Flickable.contentY 的边界

Question

询问 Flickable.contentY 边界的正确方法是什么？我需要滚动条。

通过实验我发现

offsetY <= contentY <= offsetY + contentHeight - height

其中 offsetY 可以计算为

var offsetY = contentY-Math.round(visibleArea.yPosition*contentHeight)

offsetY 在应用程序开始时为零，除非调整 Flickable 的大小，否则它似乎是恒定的。

这个公式一般有效，但可能应该有一个专门的函数。

Answer 1

我在没有偏移的情况下轻松地做了一个滚动条：

// ScrollBar.qml
import QtQuick 2.0

Rectangle {
    id: scrollbar;
    color: "#3C3C3C";
    visible: (flicker.visibleArea.heightRatio < 1.0);
    property Flickable flicker : null;
    width: 20;
    anchors {
        top: flicker.top;
        right: flicker.right;
        bottom: flicker.bottom;
    }

    Rectangle {
        id: handle;
        height: (scrollbar.height * flicker.visibleArea.heightRatio);
        color: "#5E5E5E";
        border {
            width: 1;
            color: "white";
        }
        anchors {
            left: parent.left;
            right: parent.right;
        }

        Binding { // Calculate handle's x/y position based on the content position of the Flickable
            target: handle;
            property: "y";
            value: (flicker.visibleArea.yPosition * scrollbar.height);
            when: (!dragger.drag.active);
        }
        Binding { // Calculate Flickable content position based on the handle x/y position
            target: flicker;
            property: "contentY";
            value: (handle.y / scrollbar.height * flicker.contentHeight);
            when: (dragger.drag.active);
        }
        MouseArea {
            id: dragger;
            anchors.fill: parent;
            drag {
                target: handle;
                minimumX: handle.x;
                maximumX: handle.x;
                minimumY: 0;
                maximumY: (scrollbar.height - handle.height);
                axis: Drag.YAxis;
            }
        }
    }
}

就像这样使用它：

Flickable {
    id: myFlick;
}
ScrollBar { 
    flicker: myFlick;
}

它可以用鼠标移动，并且在 Flickable 滚动时自动移动。