[英]Move Flickable/ListView using Slider QML
I need to scroll a Flickable/ListView
using a Slider
rather than a scrollbar
, If I use a ScrollBar
everything works perfect but I need a visual experience like a slider
(A round handle and a path line). 我需要使用
Slider
而不是scrollbar
来滚动Flickable/ListView
,如果使用ScrollBar
一切都可以正常工作,但是我需要像slider
一样的视觉体验(圆手柄和路径线)。 As In vertical scrollBar we can't set height
of the handle and in the horizontal scrollbar, we can't set width
of the handle. 正如在垂直滚动条中,我们不能设置手柄的
height
,在水平滚动条中,我们不能设置手柄的width
。 Due to this limitation, I used the slider
itself to scroll a Flickable/ListView
. 由于此限制,我使用
slider
本身来滚动Flickable/ListView
。 Following is the code: 以下是代码:
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) If I move the sliders
Flickable
is moving as expected but if Interactive
flag is enabled then how to move the sliders if user flicks with the fingers rather than using sliders
? 1)如果我移动
sliders
Flickable
正在按预期移动,但是如果启用了Interactive
标志,那么如果用户用手指轻拂而不是使用sliders
轻拂,如何移动sliders
?
2) Is there any way to design a scrollBar
similar to Slider
(A round handle with a path Line)? 2)有什么方法可以设计类似于
Slider
(带有路径Line的圆形手柄)的scrollBar
?
Here's an example how to connect Flickable
and Slider
s together. 这是一个如何将
Flickable
和Slider
连接在一起的示例。 Notice that vertical slider's handle is at the bottom when the position is 0, so you need to invert the position. 请注意,当位置为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
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.