MySlider.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as Template1Template1.Slider {id: controlproperty bool acceptWheel: true //滚轮滑动   property color handleBorderColor: " lightgrey"     //按钮边框颜色property color handleNormalColor: "black"  //按钮颜色property color handleHoverColor: Qt.lighter(handleNormalColor)property color handlePressColor: Qt.darker(handleNormalColor)property color completeColor: "lightgreen"property color incompleteColor: "lightgrey"implicitWidth: horizontal? 150: 24;implicitHeight: horizontal? 24: 150;//padding把长条背景挤压padding: horizontal? height/4: width/4;handle: Rectangle {x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))width: control.horizontal?(control.height/2):(control.width)height: control.horizontal?(control.height):(control.width/2)//radius: width/2  //感觉方形比原型更协调点，或许也可以用圆角矩形那种scrollbar的样式color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColorborder.width: 1border.color: handleBorderColor}background: Rectangle {//以control.horizontal为例：//control.availableHeight为去掉padding的高度//所以如果control很高的话，只根据padding来算y可能就贴着上面//这时候就需要加一部分(control.availableHeight - height) / 2来对齐x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)implicitWidth: control.horizontal ? 200 : 6implicitHeight: control.horizontal ? 6 : 200width: control.horizontal ? control.availableWidth : implicitWidthheight: control.horizontal ? implicitHeight : control.availableHeightradius: 3color: control.incompleteColorscale: control.horizontal && control.mirrored ? -1 : 1//用另一个方块分别已完成和未完成的颜色Rectangle {y: control.horizontal ? 0 : control.visualPosition * parent.heightwidth: control.horizontal ? control.position * parent.width : parent.widthheight: control.horizontal ? parent.height : control.position * parent.heightradius: 3color: control.completeColor}}MouseArea{anchors.fill: parent//避免和handle冲突acceptedButtons: Qt.NoButtononWheel: {if(wheel.angleDelta.y<0){control.decrease();}else{control.increase();}}}
}

调用：

           MySlider{x:20y:90completeColor:"pink"Text {id: name1y:-16text: "滑动值"font.pixelSize: 16color: "lightgrey"}}