Qt 使用滑块QML移动Flickable/ListView

我需要使用滑块而不是滚动条滚动Flickable/ListView，如果我使用滚动条，一切都很完美，但我需要一种视觉体验，如sliderA圆形手柄和路径线。在垂直滚动条中，我们不能设置手柄的高度；在水平滚动条中，我们不能设置手柄的宽度。由于这个限制，我使用滑块本身来滚动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如果我移动滑块Flickable正在按预期移动，但如果启用了交互标志，那么如果用户用手指而不是使用滑块进行滑动，如何移动滑块

---

2有没有办法设计一个类似滑块的滚动条？一个带路径线的圆形手柄？

下面是一个如何将Flickable和滑块连接在一起的示例。请注意，当位置为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
        }
    }
}

---

搜索此站点，了解如何创建双向绑定。您也可以在滚动条手柄内有一个较小的指示器，它根据flickable的位置在滚动条手柄内移动。@derM您能告诉我哪个站点吗？