使用 Slider QML 移动 Flickable/ListView

Question

我需要使用 Slider 而不是 scrollbar 来滚动 Flickable/ListView，如果我使用 ScrollBar 则一切正常，但我需要像这样的视觉体验a 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?

2) 有没有什么办法可以设计一个类似于Slider的scrollBar(A round handle with a path Line)?

Answer 1

这是一个如何将 Flickable 和 Slider 连接在一起的示例。注意当position为0时，vertical slider的handle在底部，所以需要反转position。

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

使用 Slider QML 移动 Flickable/ListView

Move Flickable/ListView using Slider QML

qt

slider

qml

qtquick2

qtquickcontrols2