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
    }
}