使用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
        }
    }
}