【QT学习】qml中Slider样式

在帮助文档中有介绍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"
            }
        }
    }

}

最终变成：