自定义qml滑动条Slider

自定义qml滑动条Slider

ListView{//GridView
id:myList
……
}
MediaFileSlider{
id: wifiSlider
visible: true
anchors.right: parent.right
list: myList//指定某个list
width:25
height:540
}

import QtQuick 2.0

Item{
id: root
property variant list:undefined

Rectangle {
id: sliderbar
width: parent.width
height: parent.height
color: "#19ffffff"
radius: 1
anchors.right: parent.right

MouseArea{
id:mouseScrollbar
anchors.fill: parent
onClicked: {
var pt = mouseY < button.height ? 0 : (mouseY < sliderbar.height - button.height ? mouseY : sliderbar.height - button.height)
list.contentY = pt / (sliderbar.height - button.height) * (list.contentHeight - list.visibleArea.heightRatio * list.contentHeight)
}
}

// 按钮
Rectangle {
id: button
x: 0
y: list.contentY /(list.contentHeight - (lis
4000
t.visibleArea.heightRatio * list.contentHeight)) * (sliderbar.height - button.height)
width: parent.width
height: list.visibleArea.heightRatio * sliderbar.height < (list.visibleArea.heightRatio * list.contentHeight)/5 ? (list.visibleArea.heightRatio * list.contentHeight)/5 : list.visibleArea.heightRatio * sliderbar.height;
color: "#4cffffff"
radius: 1
// 鼠标区域
MouseArea {
id: mouseArea
anchors.fill: button
drag.target: button
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: sliderbar.height - button.height
// 拖动
onMouseYChanged: {
var pt = button.y
list.contentY = pt / (sliderbar.height - button.height) * (list.contentHeight - list.visibleArea.heightRatio * list.contentHeight)
}
}
}
}
}