Qt qml 滑块

核心代码：

    property int stepSize;
    property int offset;

    ListView {
        id: list;
        anchors.left: editBox.left;
        anchors.bottom: editBox.top;
        anchors.top: parent.top
        anchors.topMargin: 19
        width: 552;
        clip: true;

        model: c_detailListModel;  
        delegate: messageItemDelegate;

        //滑块
                onContentYChanged: {
                    var total = (list.contentHeight > list.height)?(list.contentHeight - list.height): list.height;
                    var percent = 100 * contentY / total;
                    if(percent < 0)
                        percent = 0;
                    if(percent > 100)
                        percent = 100;
                    offset = percent * (slider.height - stepSize) / 100;
                    console.log("onContentYChanged contentY:", contentY, " offset", offset, "total:", total, "stepSize:", stepSize);
                }
                onContentHeightChanged: {
                    stepSize = slider.height * list.height / list.contentHeight;
                    if(stepSize > slider.height)
                        stepSize = slider.height;
                }
    }


    //滑块
        Rectangle {
            id: slider;
            width: 5;
            anchors.top: list.top;
            anchors.topMargin: 9;
            anchors.bottom: list.bottom;
            anchors.bottomMargin: 9;
            anchors.right: list.right;
            anchors.rightMargin: 15;
            color: "transparent";


            Rectangle {
                id: control;
                color: "gray";
                opacity: 0.4;
                width: slider.width;
                height: stepSize;
                y: offset;
                radius: 8;
            }
        }