QML 自定义Slider

QML 自定义Slider

此博客始创于：http://blog.csdn.net/lys211

转载请注明出处

写这个时参考了众多代码，现在把qml 里slider的样式修改的代码贴到这里备份。

效果图：

代码贴这里一份：

import QtQuick 2.4

import QtQuick.Controls 1.3

import QtQuick.Controls.Styles 1.2

import QtGraphicalEffects 1.0

import QtQml 2.2

Rectangle {

    width: 500

    height: 500//color: "#25b1e8"

    Slider {

        id: sliderHorizontal1

        x: 21

        y: 33

        width: 458

        height: 22

        value:0.1

        tickmarksEnabled: true

    }

    Slider {

        id: sliderHorizontal2

        x: 21

        y: 87

        width: 458

        height: 22

        value:0.3

        tickmarksEnabled: true

        //stepSize: 0.1;

        style:SliderStyle{

            groove:Rectangle{

                implicitHeight: 8;

                implicitWidth: sliderHorizontal2.width;

                color: "#25b1e8";

                radius: 8;

            }

            handle: Rectangle{

                anchors.centerIn: parent;

                color: control.pressed ? "green":"#25b1e8";

                radius: 6;

                width: 24;

                height: 24;

            }

        }

    }

    Slider {

        id: sliderHorizontal3

        x: 21

        y: 144

        width: 458

        height: 22;

        style:SliderStyle{

            groove:Rectangle{

                implicitHeight: 8;

                implicitWidth: sliderHorizontal2.width;

                color: "#25b1e8";

                radius: 8;

            }

            handle: Rectangle{

                anchors.centerIn: parent;

                color: control.pressed ? "lightblue":"#25b1e8";

                radius: 12;

                width: 24;

                height: 24;

                Text {

                    anchors.centerIn: parent;

                    text: String(control.value).slice(0,4);//Math.round(control.value)*100 + "%";

                    color: "blue";

                }

            }

        }

    }

    Slider {

        id: sliderHorizontal4;

        x: 21

        y: 207

        width: 458

        height: 22;

        value:0.3;

        style:SliderStyle{

            //padding.left:-150;

            groove:Rectangle{

                //anchors.centerIn: parent;

                implicitHeight: 2;

                implicitWidth: sliderHorizontal4.width;

                color: "white";

                radius: 1;

            }

            handle: Rectangle{

                anchors.centerIn: parent;

                color: control.pressed ? "lightblue":"blue";

                radius: 2;

                width: 12;

                height: 30;

                MouseArea{

                    anchors.fill: parent;

                    onPressed: {

                        console.log("handle MouseArea:", mouse.x, mouse.y, x, mouseX, mouseY);

                    }

                }

                onXChanged: {

                    console.log("handle onXChanged:", x);

                }

            }

            panel:Rectangle{

                id:panel4

                anchors.fill: parent;

                color: "#25b1e8";

                Loader{

                    id:grooveLoader4;

                    anchors.centerIn: parent;

                    sourceComponent: groove;

                }

                Loader{

                    id:handleLoader4;

                    anchors.verticalCenter: grooveLoader4.verticalCenter;

                    x:Math.min(grooveLoader4.x + (control.value * grooveLoader4.width)/(control.maximumValue - control.minimumValue) - item.width/2

                               , grooveLoader4.width);

                    sourceComponent: handle;

                    Component.onCompleted: {

                        console.log("panel", control.maximumValue, control.minimumValue, item.width, x)

                    }

                    onXChanged: {

                        console.log("panel handleLoader4 onXChanged:", x);

                    }

                }

                Text {

                    anchors.bottom: handleLoader4.top;

                    anchors.horizontalCenter: handleLoader4.horizontalCenter;

                    text: String(control.value).slice(0,4);//Math.round(control.value)*100 + "%";

                    color: "blue";

                }

            }

        }

    }

    Slider {

        id: sliderHorizontal5;

        x: 21

        y: 267

        width: 458

        height: 22;

        value:0.3;

        style:SliderStyle{

            //padding.left:-150;

            groove:Rectangle{

                //anchors.centerIn: parent;

                implicitHeight: 2;

                implicitWidth: sliderHorizontal5.width;

                color: "white";

                radius: 1;

            }

            handle: Rectangle{

                anchors.centerIn: parent;

                color: control.pressed ? "lightblue":"blue";

                radius: 4;

                width: 12;

                height: 30;

                MouseArea{

                    anchors.fill: parent;

                    onPressed: {

                        console.log("handle MouseArea:", mouse.x, mouse.y, x, mouseX, mouseY);

                    }

                }

                onXChanged: {

                    console.log("handle onXChanged:", x);

                }

                Rectangle{

                    anchors.centerIn: parent;

                    height: parent.height - parent.width;

                    width: 1;

                    color: "white";

                }

            }

            panel:Rectangle{

                id:panel5

                anchors.fill: parent;

                color: "#25b1e8";

                LinearGradient{

                    anchors.fill: panel5;

                    gradient: Gradient{

                        GradientStop { position: 0.00; color: "lightblue";}

                        GradientStop { position: 1.00; color: "blue";}

                    }

                    start: Qt.point(0, 0);

                    end:Qt.point(panel5.width, 0);

                }

                Loader{

                    id:grooveLoader5;

                    anchors.centerIn: parent;

                    sourceComponent: groove;

                }

                Loader{

                    id:handleLoader5;

                    anchors.verticalCenter: grooveLoader5.verticalCenter;

                    x:Math.min(grooveLoader5.x + (control.value * grooveLoader5.width)/(control.maximumValue - control.minimumValue) - item.width/2

                               , grooveLoader5.width);

                    sourceComponent: handle;

                    Component.onCompleted: {

                        console.log("panel", control.maximumValue, control.minimumValue, item.width, x)

                    }

                    onXChanged: {

                        console.log("panel handleLoader4 onXChanged:", x);

                    }

                }

                Text {

                    anchors.bottom: handleLoader5.top;

                    anchors.horizontalCenter: handleLoader5.horizontalCenter;

                    text: String(control.value).slice(0,4);//Math.round(control.value)*100 + "%";

                    color: "blue";

                }

            }

        }

    }

}

也提供整个文件的下载链接：

http://download.csdn.net/detail/lys211/8541163