网上都是水平滚动条,没找到竖直的,自己写个
版本一
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Slider {
id: control
anchors.centerIn: parent
orientation: Qt.Vertical
value: 0.5
onValueChanged:{
// console.log(value)
}
background: Rectangle {
x: control.leftPadding + control.availableWidth / 2 - width / 2
y: control.bottomPadding
implicitWidth: 4
implicitHeight: 200
width: implicitWidth
height: control.availableHeight
radius: 2
color: "#21be2b"
Component.onCompleted: {
console.log("===============1===================")
// console.log(x, y)
console.log(control.availableWidth, control.availableHeight, height)
// console.log(control.leftPadding, control.topPadding, control.bottomPadding,)
}
//绿色滚动条
Rectangle {
width: parent.width
height: control.visualPosition * parent.height
color: "#bdbebf"
radius: 2
Component.onCompleted: {
console.log("===============2===================")
// console.log(control.visualPosition, parent.width, parent.height)
}
}
}
//圆形句柄
handle: Rectangle {
x: control.leftPadding + control.availableWidth / 2 - width / 2
y: control.bottomPadding + control.visualPosition * (control.availableHeight - height) //control.availableHeight是动态变化的
implicitWidth: 26
implicitHeight: 26
radius: 13
color: control.pressed ? "red"/*"#f0f0f0"*/ : "blue"/*"#f6f6f6"*/
border.color: "#bdbebf"
Component.onCompleted: {
console.log("===============3===================")
console.log("control.availableHeight, height: ", control.availableHeight, height)
}
}
}
}
版本二
import QtQuick 2.15
import QtQuick.Controls 2.15
Slider {
id: control
orientation:Qt.Vertical
property bool acceptWheel: true //滚轮滑动
property color handleNormalColor: "white" //按钮颜色
property color handleHoverColor: Qt.lighter(handleNormalColor)
property color handlePressColor: Qt.darker(handleNormalColor)
property color completeColor: "#6495ED"
property color incompleteColor: "#C1CDC1"
implicitWidth: 24;
implicitHeight: 150;
//padding把长条背景挤压
padding: width/4;
handle: Rectangle {
x: control.leftPadding + (control.availableWidth - width) / 2
y: control.topPadding + (control.visualPosition * (control.availableHeight - height))
width: control.width
height: control.width
radius: width/2
color: control.pressed
?handlePressColor
:control.hovered
?handleHoverColor
:handleNormalColor
}
background: Rectangle {
x: control.leftPadding + ((control.availableWidth - width) / 2)
y: control.topPadding
implicitWidth: control.horizontal ? 200 : 6
implicitHeight: control.horizontal ? 6 : 200
width: implicitWidth
height: control.availableHeight
radius: 3
color: control.incompleteColor
//用另一个方块分别已完成和未完成的颜色
Rectangle {
y: control.visualPosition * parent.height
width: parent.width
height: control.position * parent.height
radius: 3
color: control.completeColor
}
}
}