Question

我需要使用Flickable/ListView而不是Slider滚动scrollbar，如果我使用ScrollBar，一切都很完美，但我需要像{{{{{{ {1}}（圆形手柄和路径线）。在纵向scrollBar中，我们无法设置句柄的slider，而在水平滚动条中，我们无法设置句柄的height。由于此限制，我使用width本身滚动slider。以下是代码：

Flickable/ListView

1）如果我移动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 } } sliders正在按预期移动，但如果Flickable标志已启用，那么如果用户用手指轻弹而不是使用{{{} {}，那么如何移动滑块1}}？

2）有没有办法设计一个Interactive类似于sliders（带路径线的圆形句柄）？

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

使用Slider QML移动Flickable / ListView

1 个答案: