Границы Flickable.contentY в QML

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.