qml学习-------------Slider（滑块）

来源：互联网发布：javascript封装函数编辑：程序博客网时间：2024/05/16 00:56
Slider跟其他的控件一样，可以通过SliderStyle来设置滑块的风格。
import QtQuick 2.2import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2Rectangle{    width: 320;    height: 240;    color: "lightgray";    Row{        anchors.fill: parent;        spacing: 20;        Column{            width: 200;            spacing: 16;            Text{                id:sliderStat;                color: "blue";                text:"current - 0.1";            }            Slider{                width: 200;                height: 30;                stepSize: 0.01;                value: 1;                onValueChanged: {                    sliderStat.text = "current - " + value;                }            }            Slider{                width: 200;                height: 30;                minimumValue: 0;                maximumValue: 100;                stepSize: 1;                value: 50;                tickmarksEnabled: true;            }            Slider{                id: customGrooveAndHandle;                width: 200;                height: 30;                stepSize: 0.1;                tickmarksEnabled: true;                value:  0;                style: SliderStyle{                    groove: Rectangle{                        implicitWidth:  200;                        implicitHeight: 8;                        color: "gray";                        radius: 8;                    }                    handle: Rectangle{                        anchors.centerIn: parent;                        color:control.pressed ? "white":"lightgray";                        border.color: "gray";                        border.width: 2;                        width: 34;                        height: 34;                        radius: 12;                    }                }            }            Slider{                id: customPanel;                width: 200;                height: 36;                stepSize: 0.1;                value: 0;                tickmarksEnabled: true;                style: SliderStyle{                    groove: Rectangle{                        implicitWidth: 200;                        implicitHeight: 8;                        color: "gray";                        radius: 8;                    }                    handle: Rectangle{                        anchors.centerIn: parent;                        color: control.pressed ? "white":"lightgray";                        border.color: "gray";                        border.width: 2;                        width: 34;                        height: 34;                        radius: 12;                        Text{                            anchors.centerIn: parent;                            text: control.value;                            color: "red";                        }                    }                    panel: Rectangle{                        anchors.fill: parent;                        radius: 4;                        color: "lightsteelblue";                        Loader{                            id: grooveLoader;                            anchors.centerIn: parent;                            sourceComponent: groove;                        }                        Loader{                            id: handleLoader;                            anchors.verticalCenter: grooveLoader.verticalCenter;                            x: Math.min(grooveLoader.x + (control.value * grooveLoader.width)/(control.maximumValue - control.minimumValue) , grooveLoader.width - item.width  );                            sourceComponent: handle;                        }                    }                }            }        }        Slider{            width: 30;            height: 200;            orientation: Qt.Vertical;            stepSize: 0.1;            value: 0.2;            tickmarksEnabled: true;        }    }}
0 0