QML基本组件 滑动条 Slider

描述

Slider通过手柄沿轨迹滑动来设置数值。

Qt帮助文档搜索 “slider” 获取详细信息。

属性

from : real
to : real
value : real
orientation : enumeration
stepsize : real
touchDragThreshold : qreal

信号

onValueChange {}

---

import QtQuick
import QtQuick.ControlsWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Slider {id: sliderx: 100y: 100width: 300height: 20from: 0to: 100stepSize: 1background: Rectangle {x: slider.leftPaddingy: slider.topPadding + slider.availableHeight / 2 - height / 2implicitWidth: 200implicitHeight: 10width: slider.availableWidthheight: implicitHeightradius: height/2color: "#bdbebf"Rectangle {// slider.visualPosition 可视比例width: slider.visualPosition * parent.widthheight: parent.heightcolor: "#21be2b"radius: height /2}}handle: Rectangle {x: slider.leftPadding + slider.visualPosition * (slider.availableWidth-width)y: slider.topPadding + slider.availableHeight /2 - height/2implicitWidth: 32implicitHeight: 32radius: implicitHeight / 2color: slider.pressed ? "#F0F0F0" : "#F6F6F6"border.width: 1border.color: "#bdbebf"}Label {id: valueLabelanchors.left: slider.rightanchors.leftMargin: 10anchors.verticalCenter: slider.verticalCenterfont.pixelSize: 32color: "#21be2b"text: slider.value}}
}

background: Rectangle {x: slider.leftPaddingy: slider.topPadding + slider.availableHeight / 2 - height / 2

handle: Rectangle {//qt进度条触控区域两端会自动减去handle的的宽度x: slider.leftPadding + slider.visualPosition * (slider.availableWidth-width)