使用Slider移动Flickable/ListView

Question

我需要使用一个Flickable/ListView而不是一个scrollbar滚动一个ScrollBar，如果我使用一个ScrollBar，一切都是完美的，但是我需要一个像slider(圆柄和路径线)这样的视觉体验。在垂直scrollbar中，我们不能设置句柄的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，如何移动滑块

( 2)是否有类似于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
        }
    }
}

​

​