在帮助文档中有介绍slider
因此,在main.qml中
CustomSlider
{
maximumValue:500
minimumValue:0
stepSize: 1
value: 100
orientation: Qt.Vertical
onValueChanged:
{
rangeTxt.text = value
}
}
自定义slider
import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Slider {
id:control
style:SliderStyle
{
handle:customHander
groove:customGroove
}
/*滑块*/
Component
{
id:customHander
Rectangle {
anchors.centerIn: parent
color: "#2371C8"
implicitWidth: 20
implicitHeight: 20
radius: 10
}
}
Component
{
id:customGroove
Rectangle {
implicitWidth: 200
implicitHeight: 8
color: "white"
radius: 8
Rectangle
{
implicitWidth:(control.value/control.maximumValue)*control.height
implicitHeight:parent.height
radius:parent.radius
color:"#2371C8"
}
}
}
}
最终变成: