Quick控件--7.slider
1 效果
2 简介
slider控件常用,自定义备用。
3 控件代码
3.1 SenSlider.qml
import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Rectangle {
property real minValue: 0
property real maxValue: 100
property real defaultValue: 0
property real stepSizeValue: 10
property bool tickmarkShow: true
property int formWidth: 200
property int headWidth: 20
property int tailWidth: 20
property int formHeight: 30
property int grooveHeight: 4
property int handleHeight: 20
property int handleWidth: 10
property int textMargin: 5
property int fontSize: 12
property color fontColor: "black"
property color grooveColor: "gray"
property string headText: "head"
// update value
property string newValue: "0"
id: recId
width: formWidth
height: formHeight
Row {
Rectangle {
id: headRec
width: formWidth / 8
height: formHeight
Text {
id: headTextId
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: textMargin
}
font.pixelSize: fontSize
color: fontColor
text: headText
}
}
Rectangle {
id: midRec
width: formWidth - headWidth - tailWidth
height: formHeight
Slider {
id: sliderId
width: parent.width
height: parent.height
anchors.centerIn: parent
minimumValue: minValue
maximumValue: maxValue
value: defaultValue
stepSize: stepSizeValue
tickmarksEnabled: tickmarkShow
style: SliderStyle {
groove: Rectangle {
width: formWidth - headWidth - tailWidth
height: grooveHeight
radius: 4
color: grooveColor
}
handle: Rectangle {
width: handleWidth
height: handleHeight
radius: 10
color: "white"
border {
width: 2
color: "mediumslateblue"
}
}
}
updateValueWhileDragging: false
onValueChanged: {
tailTextId.text = value.toFixed(2)
newValue = tailTextId.text
}
}
}
Rectangle {
id: tailRec
width: formWidth / 8
height: formHeight
Text {
id: tailTextId
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: textMargin
}
font.pixelSize: fontSize
color: fontColor
text: ""
}
}
}
}
3.2 main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import "./common" as SenCom
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
SenCom.SenSlider {
anchors.centerIn: parent
}
}