使用Slider QML移动Flickable / ListView

Question

我需要使用Slider而不是scrollbar来滚动Flickable/ListView ，如果使用ScrollBar一切都可以正常工作，但是我需要像slider一样的视觉体验（圆手柄和路径线）。 正如在垂直滚动条中，我们不能设置手柄的height ，在水平滚动条中，我们不能设置手柄的width 。 由于此限制，我使用slider本身来滚动Flickable/ListView 。 以下是代码：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    id:window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Flickable{
        id:flick
        width : parent.width * 0.70
        height : parent.height * 0.70

        contentWidth: contentItem.childrenRect.width
        contentHeight: contentItem.childrenRect.height
        contentX:(contentWidth - width) * horSlider.position
        contentY:(contentHeight-height) * verSlider.position
        clip:true

        Grid{
            id:grid
            columns: 5
            spacing:50
            Repeater{
                id:rept
                model:20
                Button{
                    width: 100
                    height : 100
                    text:"Btn "+index
                }
            }
        }
    }

    Slider{
        id:horSlider
        anchors.top:flick.bottom
        anchors.left:flick.left
        anchors.right:flick.right
    }

    Slider{
        id:verSlider
        orientation: Qt.Vertical
        anchors.top:flick.top
        anchors.bottom:flick.bottom
        anchors.left:flick.right

        rotation: 180
    }
}

1）如果我移动sliders Flickable正在按预期移动，但是如果启用了Interactive标志，那么如果用户用手指轻拂而不是使用sliders轻拂，如何移动sliders ？

2）有什么方法可以设计类似于Slider （带有路径Line的圆形手柄）的scrollBar ？

Answer 1

这是一个如何将Flickable和Slider连接在一起的示例。 请注意，当位置为0时，垂直滑块的手柄位于底部，因此您需要反转位置。

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

Window {
    id: window
    width: 360
    height: 360
    visible: true

    Flickable {
        id: flickable
        anchors.fill: parent

        contentWidth: dummyContent.width
        contentHeight: dummyContent.height

        Text {
            id: dummyContent
            text: "ABC"
            color: "red"
            font.pixelSize: 512
        }
    }

    Slider {
        id: hslider
        anchors.left: parent.left
        anchors.right: vslider.left
        anchors.bottom: parent.bottom

        value: flickable.contentX / (flickable.contentWidth - flickable.width)

        Binding {
            target: flickable
            property: "contentX"
            value: hslider.position * (flickable.contentWidth - flickable.width)
            when: hslider.pressed
        }
    }

    Slider {
        id: vslider
        orientation: Qt.Vertical
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: hslider.top

        value: 1.0 - (flickable.contentY / (flickable.contentHeight - flickable.height))

        Binding {
            target: flickable
            property: "contentY"
            value: (1.0 - vslider.position) * (flickable.contentHeight - flickable.height)
            when: vslider.pressed
        }
    }
}