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.4Rectangle {property real minValue: 0property real maxValue: 100property real defaultValue: 0property real stepSizeValue: 10property bool tickmarkShow: trueproperty int formWidth: 200property int headWidth: 20property int tailWidth: 20property int formHeight: 30property int grooveHeight: 4property int handleHeight: 20property int handleWidth: 10property int textMargin: 5property int fontSize: 12property color fontColor: "black"property color grooveColor: "gray"property string headText: "head"// update valueproperty string newValue: "0"id: recIdwidth: formWidthheight: formHeightRow {Rectangle {id: headRecwidth: formWidth / 8height: formHeightText {id: headTextIdanchors {verticalCenter: parent.verticalCenterright: parent.rightrightMargin: textMargin}font.pixelSize: fontSizecolor: fontColortext: headText}}Rectangle {id: midRecwidth: formWidth - headWidth - tailWidthheight: formHeightSlider {id: sliderIdwidth: parent.widthheight: parent.heightanchors.centerIn: parentminimumValue: minValuemaximumValue: maxValuevalue: defaultValuestepSize: stepSizeValuetickmarksEnabled: tickmarkShowstyle: SliderStyle {groove: Rectangle {width: formWidth - headWidth - tailWidthheight: grooveHeightradius: 4color: grooveColor}handle: Rectangle {width: handleWidthheight: handleHeightradius: 10color: "white"border {width: 2color: "mediumslateblue"}}}updateValueWhileDragging: falseonValueChanged: {tailTextId.text = value.toFixed(2)newValue = tailTextId.text}}}Rectangle {id: tailRecwidth: formWidth / 8height: formHeightText {id: tailTextIdanchors {verticalCenter: parent.verticalCenterleft: parent.leftleftMargin: textMargin}font.pixelSize: fontSizecolor: fontColortext: ""}}}
}

3.2 main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import "./common" as SenComWindow {visible: truewidth: 640height: 480title: qsTr("Hello World")SenCom.SenSlider {anchors.centerIn: parent}
}